/* ========================================================= SÖRFESZTIVÁL DESIGN SYSTEM — tokens ========================================================= */ /* Google Fonts: a -ben töltődik be, nem itt */ :root { --sky-bright: #05cef2; --sky-mid: #07b6e1; --sky-deep: #0f68a9; --gold: #f5c518; --wheat: #ffcc29; --amber: #f0ad1f; --orange: #cf6e39; --hop-light: #8abf2c; --white: #ffffff; --ink: #0b1a2c; --mute: rgba(255,255,255,0.65); --mute-strong: rgba(255,255,255,0.85); --hairline: rgba(255,255,255,0.18); --fg: var(--white); --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } /* ========================================================= REDESIGN — variant tokens ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { font-family: var(--font-body); color: var(--fg); background: var(--sky-deep); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :root, [data-variant="klasszikus"] { --v-overlay: linear-gradient(160deg, rgba(0,60,120,0.50) 0%, rgba(0,20,60,0.72) 100%); --v-bubbles: 1; --v-card-bg: rgba(255,255,255,0.08); --v-card-border: 2px solid rgba(245,197,24,0.5); --v-card-radius: 16px; --v-card-pad: 20px 22px; --v-display-tint: var(--white); --v-section-rhythm: 60px; --v-h1-size: clamp(2.4rem, 6vw, 5rem); --v-h1-track: 0.02em; --v-h2-size: clamp(1.6rem, 3.4vw, 2.4rem); --v-textshadow: 0 2px 8px rgba(0,0,0,0.6); --v-card-shadow: 0 12px 32px rgba(0,30,70,0.35); } [data-variant="poszter"] { --v-overlay: linear-gradient(155deg, rgba(0,42,100,0.55) 0%, rgba(0,16,50,0.85) 100%); --v-bubbles: 0.6; --v-card-bg: rgba(255,255,255,0.06); --v-card-border: 3px solid var(--gold); --v-card-radius: 4px; --v-card-pad: 22px 24px; --v-display-tint: var(--wheat); --v-section-rhythm: 72px; --v-h1-size: clamp(3rem, 9vw, 7.5rem); --v-h1-track: -0.01em; --v-h2-size: clamp(2rem, 4.4vw, 3.2rem); --v-textshadow: 0 4px 16px rgba(0,0,0,0.55); --v-card-shadow: 0 18px 40px rgba(0,16,50,0.45); } [data-variant="modern"] { --v-overlay: none; --v-bubbles: 0; --v-card-bg: rgba(255,255,255,0.04); --v-card-border: 1px solid rgba(255,255,255,0.16); --v-card-radius: 14px; --v-card-pad: 24px 26px; --v-display-tint: var(--white); --v-section-rhythm: 56px; --v-h1-size: clamp(2.2rem, 5vw, 3.8rem); --v-h1-track: -0.015em; --v-h2-size: clamp(1.4rem, 2.4vw, 1.8rem); --v-textshadow: none; --v-card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } [data-variant="modern"] body, html[data-variant="modern"] body { background: radial-gradient(ellipse at 10% 0%, #0d3a72 0%, transparent 55%), radial-gradient(ellipse at 90% 100%, #0a2548 0%, transparent 60%), #061a36; } /* PAGE SHELL */ .sf-root { position: relative; min-height: 100vh; isolation: isolate; } .sf-bg { position: fixed; inset: 0; z-index: -2; background-image: url('kék alap.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; pointer-events: none; } [data-variant="modern"] .sf-bg { background-image: none; } .sf-bg-overlay { position: fixed; inset: 0; z-index: -1; background: var(--v-overlay); pointer-events: none; } /* Bubbles */ .sf-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--v-bubbles); transition: opacity 400ms ease; } .sf-bubble { position: absolute; bottom: -60px; border-radius: 50%; background: rgba(255,255,255,0.12); animation: sf-rise linear infinite; } @keyframes sf-rise { 0% { transform: translateY(0) scale(1); opacity: 0.7; } 100% { transform: translateY(-110vh) scale(1.4); opacity: 0; } } .sf-main { position: relative; z-index: 1; } /* HEADER */ .sf-header { position: sticky; top: 0; z-index: 50; padding: 0; backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(0,16,40,0.45), rgba(0,16,40,0.10) 70%, transparent); border-bottom: 1px solid rgba(255,255,255,0.08); } .sf-header__inner { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; } .sf-header__brand { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; } .sf-header__brand img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } .sf-header__brand-text { display: flex; flex-direction: column; line-height: 1; } .sf-header__brand-text .ed { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; color: var(--gold); } .sf-header__brand-text .nm { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-top: 4px; } .sf-nav { display: flex; gap: 4px; align-items: center; } .sf-nav__item { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; color: rgba(255,255,255,0.78); cursor: pointer; user-select: none; transition: color 150ms, background 150ms; } .sf-nav__item:hover { color: var(--white); background: rgba(255,255,255,0.06); } .sf-nav__item.active { color: var(--ink); background: var(--gold); } [data-variant="modern"] .sf-nav__item.active { background: transparent; color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; } .sf-header__cta { display: flex; align-items: center; gap: 12px; } .sf-headcd { display: flex; gap: 6px; align-items: baseline; padding: 6px 12px; border: 1px solid rgba(245,197,24,0.4); border-radius: 999px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); } .sf-headcd b { color: var(--gold); font-weight: 700; } /* BUTTONS */ .sf-btn { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: transform 150ms, background 150ms, border-color 150ms, color 150ms; display: inline-flex; align-items: center; gap: 10px; border: 2px solid transparent; } .sf-btn:active { transform: scale(0.97); } .sf-btn--outline { background: transparent; border-color: var(--gold); color: var(--white); } .sf-btn--outline:hover { background: rgba(245,197,24,0.10); } .sf-btn--sm { padding: 8px 16px; font-size: 11px; } [data-variant="poszter"] .sf-btn { border-radius: 4px; border-width: 3px; } /* SECTION SCAFFOLDING */ .sf-section { padding: var(--v-section-rhythm) 32px; max-width: 1240px; margin: 0 auto; } .sf-overline { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); } .sf-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--v-h1-size); line-height: 1; letter-spacing: var(--v-h1-track); text-transform: uppercase; color: var(--v-display-tint); text-shadow: var(--v-textshadow); } .sf-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--v-h2-size); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); } .sf-lead { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 560px; } .sf-rule { width: 100%; max-width: 500px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--white), var(--gold), transparent); border-radius: 2px; margin: 24px auto; } [data-variant="modern"] .sf-rule { background: rgba(255,255,255,0.18); height: 1px; max-width: 100%; } [data-variant="poszter"] .sf-rule { background: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 26px); height: 4px; border-radius: 0; } [data-variant="poszter"] .sf-overline { display: inline-block; padding: 4px 12px; background: var(--gold); color: var(--ink); letter-spacing: 0.24em; } /* COUNTDOWN */ .sf-cd { display: flex; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; justify-content: center; margin-top: 12px; } [data-variant="modern"] .sf-cd { justify-content: flex-start; } .sf-cd__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; } .sf-cd__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; color: var(--white); background: rgba(255,255,255,0.08); border: 2px solid rgba(245,197,24,0.5); border-radius: 16px; min-width: clamp(70px, 14vw, 120px); padding: 14px 10px 12px; text-shadow: 0 4px 16px rgba(0,0,0,0.4); position: relative; overflow: hidden; transition: border-color 0.3s; text-align: center; } .sf-cd__num::before { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: rgba(255,255,255,0.12); } .sf-cd__num.tick { border-color: var(--gold); } .sf-cd__unit { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.65); } .sf-cd__sep { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); color: rgba(245,197,24,0.7); align-self: flex-start; padding-top: 18px; animation: sf-blink 1s step-start infinite; } @keyframes sf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes sf-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes sf-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.4); } 50% { box-shadow: 0 0 0 6px rgba(245,197,24,0); } } /* ── Belépési animációk ── */ @keyframes sf-racs-entry { 0% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0.14; transform: scale(1); } } @keyframes sf-rise-felkor { 0% { opacity: 0; transform: translateY(90px) scale(0.72); filter: drop-shadow(0 0 0px rgba(245,197,24,0)); } 55% { filter: drop-shadow(0 0 90px rgba(245,197,24,0.65)); } 100% { opacity: 0.88; transform: translateY(0) scale(1); filter: drop-shadow(0 0 44px rgba(245,197,24,0.20)); } } @keyframes sf-drop-logo { 0% { opacity: 0; transform: translateY(-70px) scale(0.82); } 65% { transform: translateY(10px) scale(1.03); } 82% { transform: translateY(-5px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes sf-blur-left { 0% { opacity: 0; transform: translateX(-50px); filter: blur(14px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes sf-blur-right { 0% { opacity: 0; transform: translateX(50px); filter: blur(14px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes sf-line-grow { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes sf-pop-elastic { 0% { opacity: 0; transform: scale(0.4); } 55% { transform: scale(1.12); } 75% { transform: scale(0.96); } 90% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } @keyframes sf-logo-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes sf-cd-pop { 0% { opacity: 0; transform: translateY(24px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes sf-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes sf-beam-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes sf-shape1 { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(18deg); } } @keyframes sf-shape2 { 0%, 100% { transform: translateY(0px) rotate(45deg); } 50% { transform: translateY(-14px) rotate(62deg); } } @keyframes sf-shape3 { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.25); } } /* ── Folyamatos animációk ── */ @keyframes sf-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 40px rgba(245,197,24,0.15)); } 50% { transform: scale(1.045); filter: drop-shadow(0 0 72px rgba(245,197,24,0.38)); } } @keyframes sf-logo-float { 0%, 100% { transform: translateY(0px) rotate(-0.5deg); } 50% { transform: translateY(-14px) rotate(0.5deg); } } @keyframes sf-racs-left { 0%, 100% { transform: translateX(0px) translateY(0px); opacity: 0.14; } 33% { transform: translateX(-10px) translateY(-6px); opacity: 0.19; } 66% { transform: translateX(-5px) translateY(8px); opacity: 0.12; } } @keyframes sf-racs-right { 0%, 100% { transform: translateX(0px) translateY(0px); opacity: 0.14; } 33% { transform: translateX(10px) translateY(8px); opacity: 0.19; } 66% { transform: translateX(5px) translateY(-6px); opacity: 0.12; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; transition-duration: 0.01ms !important; } } [data-variant="poszter"] .sf-cd__num { border-radius: 4px; border-width: 3px; border-color: var(--gold); } [data-variant="modern"] .sf-cd__num { border-color: rgba(255,255,255,0.20); border-width: 1px; background: rgba(255,255,255,0.04); border-radius: 12px; } [data-variant="modern"] .sf-cd__num.tick { border-color: var(--gold); } [data-variant="modern"] .sf-cd__sep { color: rgba(255,255,255,0.30); animation: none; } /* CARDS */ .sf-card { background: var(--v-card-bg); border: var(--v-card-border); border-radius: var(--v-card-radius); padding: var(--v-card-pad); color: var(--white); transition: background 200ms, border-color 200ms, transform 200ms; box-shadow: var(--v-card-shadow); position: relative; } .sf-card:hover { background: rgba(255,255,255,0.14); border-color: var(--gold); transform: translateY(-2px); } [data-variant="modern"] .sf-card:hover { transform: none; border-color: var(--gold); background: rgba(255,255,255,0.06); } .sf-card__overline { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; } .sf-card__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: 0.02em; color: var(--white); } /* CHIPS */ .sf-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.06); border: 1px solid rgba(245,197,24,0.35); border-radius: 999px; padding: 7px 14px; cursor: pointer; user-select: none; transition: background 150ms, color 150ms, border-color 150ms; } .sf-chip:hover { background: rgba(255,255,255,0.12); } .sf-chip.active { background: var(--gold); color: var(--ink); border-color: var(--gold); } [data-variant="poszter"] .sf-chip { border-radius: 3px; border-width: 2px; } /* VENUE */ .sf-map { position: relative; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 22% 22%, rgba(138,191,44,0.45) 0%, transparent 38%), radial-gradient(ellipse at 78% 70%, rgba(98,162,39,0.32) 0%, transparent 42%), linear-gradient(160deg, #0a3a30 0%, #073026 60%, #052821 100%); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); } .sf-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0 1px, transparent 1.5px); background-size: 24px 24px; opacity: 0.6; } .sf-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(70deg, transparent 30%, rgba(245,197,24,0.16) 31%, rgba(245,197,24,0.16) 32.2%, transparent 32.5%), linear-gradient(20deg, transparent 50%, rgba(245,197,24,0.12) 51%, rgba(245,197,24,0.12) 52%, transparent 52.5%); } .sf-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .sf-pin__dot { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--gold); transform: rotate(-45deg); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px rgba(0,0,0,0.35); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 12px; } .sf-pin__dot > span { transform: rotate(45deg); } .sf-pin--stage .sf-pin__dot { background: var(--gold); } .sf-pin--bar .sf-pin__dot { background: var(--amber); } .sf-pin--food .sf-pin__dot { background: var(--orange); color: var(--white); } .sf-pin--info .sf-pin__dot { background: var(--sky-bright); color: var(--ink); } .sf-pin--wc .sf-pin__dot { background: var(--white); color: var(--ink); } .sf-pin--entry .sf-pin__dot { background: var(--hop-light); color: var(--ink); } .sf-pin__label { background: rgba(0,0,0,0.75); color: var(--white); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; opacity: 0; transform: translateX(-4px); transition: opacity 150ms, transform 150ms; pointer-events: none; white-space: nowrap; } .sf-pin:hover .sf-pin__label, .sf-pin.active .sf-pin__label { opacity: 1; transform: translateX(0); } .sf-pin.active .sf-pin__dot { outline: 3px solid var(--gold); outline-offset: 2px; } .sf-venue__legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .sf-venue__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; } /* GALLERY */ .sf-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .sf-gal__card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--v-card-radius); overflow: hidden; border: var(--v-card-border); cursor: pointer; transition: transform 200ms; } .sf-gal__card:hover { transform: translateY(-3px); } .sf-gal__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.45) 0%, transparent 60%); } .sf-gal__year { position: absolute; top: 14px; left: 16px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; color: var(--white); text-shadow: 0 2px 8px rgba(0,0,0,0.45); } .sf-gal__edition { position: absolute; bottom: 14px; left: 16px; font-family: var(--font-display); font-weight: 700; font-size: 42px; line-height: 1; color: var(--white); text-shadow: 0 4px 16px rgba(0,0,0,0.5); } .sf-gal__highlight { position: absolute; bottom: 14px; right: 16px; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.88); text-align: right; max-width: 60%; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } /* FOOTER */ .sf-footer { position: relative; padding: 52px 0 32px; border-top: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (max-width: 820px) { .sf-footer { padding: 40px 0 28px; } } @media (max-width: 820px) { .sf-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 0 18px !important; text-align: center; } .sf-footer-grid > div { display: flex; flex-direction: column; align-items: center; padding: 24px 12px; } .sf-footer-grid > div + div { border-top: 1px solid rgba(255,255,255,0.08); } } @media (max-width: 480px) { .sf-footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; } } @media (max-width: 480px) { .sf-footer-legal { flex-direction: column !important; text-align: center !important; align-items: center !important; } } /* MOBILE */ @media (max-width: 820px) { .sf-header { padding: 12px 18px; } .sf-nav { display: none; } .sf-section { padding: 60px 18px; } .sf-cd__num { padding: 10px 8px 8px; min-width: 64px; font-size: 2rem; } .sf-cd__sep { font-size: 1.5rem; padding-top: 8px; } } .sf-nav__toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--white); padding: 8px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; } @media (max-width: 820px) { .sf-nav__toggle { display: inline-flex; } } @keyframes sf-menu-slide-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sf-mobile-menu { display: none; position: fixed; top: 94px; left: 0; right: 0; bottom: 0; background: rgba(2,12,28,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 40; padding: 32px 24px; flex-direction: column; gap: 6px; border-top: 1px solid rgba(245,197,24,0.15); } .sf-mobile-menu.open { display: flex; animation: sf-menu-slide-in 280ms cubic-bezier(0.22,1,0.36,1) both; } .sf-mobile-menu .sf-nav__item { font-size: 18px; padding: 16px 18px; }