/* ========================================================================== NAOS — the Team Janni skin A marble temple at night above the Aegean. Three materials only: lapis (surfaces), marble (inscriptions, plaques), gold leaf (what matters). All gold answers to one light source: the pointer on desktop, tilt or a slow torch-like drift on phones (skin.js writes --gx / --gy on ). Loaded after style.css; every rule is scoped to html.naos. ========================================================================== */ @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/cinzel-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/cinzel-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/ebgaramond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/ebgaramond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/ebgaramond-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 800; font-display: swap; src: url(fonts/ebgaramond-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/cinzel-deco-700-latin.woff2) format('woff2'); } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/cinzel-deco-900-latin.woff2) format('woff2'); } /* Greek letters (numerals on the portal, legend words) come from GFS Didot */ @font-face { font-family: 'GFS Didot'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/gfs-didot-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @property --gx { syntax: ''; inherits: true; initial-value: .5; } @property --gy { syntax: ''; inherits: true; initial-value: .3; } @property --sweep { syntax: ''; inherits: false; initial-value: 160%; } html.naos { /* palette */ /* colours sampled from the logo: violet-navy ground, royal blue glow, icy silver metal. Silver is the metal of the page: the --gold / --leaf names now hold silver (kept so every rule follows). Real gold (--au, --leaf-au) is only for money (drachmas, the gold shop), the top tier and first place */ --nyx: #070820; /* night sky, page ground (logo corners #090618 / #090b31) */ --lapis: #10246e; --royal: #2858b7; /* logo blue */ --royal-glow: #3d7eff; /* logo glow */ --aegean: #2858b7; --aegean-hi: #5b8cff; --silver: #c7dbe4; /* logo highlights */ --steel: #7c92ac; --marble: #eef1f6; --gold: #c7dbe4; --gold-hi: #eef5fb; --gold-lo: #4c6182; --on-gold: #0b1d4d; --au: #d8b65c; --au-hi: #f4e2a8; --au-lo: #8e6b22; --on-au: #080e17; --on-marble: #0b1d4d; --gx: .5; --gy: .3; --spec-x: calc(var(--gx) * 100%); --spec-y: calc(var(--gy) * 100%); /* materials */ --leaf-au: radial-gradient(70vmax 52vmax at var(--spec-x) var(--spec-y), rgba(255, 249, 226, .95) 0%, rgba(246, 227, 163, .55) 9%, rgba(246, 227, 163, 0) 26%), linear-gradient(118deg, #7d5c1b 0%, #c7a148 16%, #f2dc98 30%, #b8933e 46%, #e3c777 62%, #fbf0cc 74%, #9a7628 90%, #c7a148 100%); --leaf-au-flat: linear-gradient(118deg, #8e6b22, #d8b65c 30%, #f2dc98 50%, #c9a24a 72%, #8e6b22); --leaf: var(--silver-leaf); --leaf-flat: linear-gradient(118deg, #66788f, #c7dbe4 30%, #ffffff 50%, #a9bccd 72%, #66788f); /* the logo's metal: icy silver with a pointer highlight */ --silver-leaf: radial-gradient(70vmax 52vmax at var(--spec-x) var(--spec-y), rgba(255, 255, 255, .95) 0%, rgba(214, 232, 240, .5) 10%, rgba(214, 232, 240, 0) 26%), linear-gradient(118deg, #56657c 0%, #b9cdd8 20%, #ffffff 33%, #8ea2b9 50%, #dbe7ee 66%, #f6fbff 76%, #66788f 92%); /* accent words: the logo's sapphire blue running into ice white */ --leaf-accent: radial-gradient(70vmax 52vmax at var(--spec-x) var(--spec-y), rgba(255, 255, 255, .9) 0%, rgba(190, 214, 255, .45) 10%, rgba(190, 214, 255, 0) 26%), linear-gradient(118deg, #3a6bd4 0%, #8db3ff 20%, #eef5ff 34%, #6f98f2 50%, #c6dbff 64%, #ffffff 74%, #4373d8 92%); /* dark steel for lettering on marble */ --leaf-deep: linear-gradient(118deg, #0e1a36 0%, #2a3f66 30%, #54709a 48%, #22365c 70%, #0c1730 100%); --marble-tex: url(img/marble.webp); --lapis-tex: url(img/lapis.webp); --meander: url("data:image/svg+xml;utf8,"); --meander-ink: url("data:image/svg+xml;utf8,"); --sprig: url("data:image/svg+xml;utf8,"); /* the master tokens, re-cast */ --bg: var(--nyx); --bg-2: #0a0c2c; --panel: rgba(18, 36, 110, .32); --panel-solid: #0a0d30; --panel-hi: rgba(40, 88, 183, .4); --line: rgba(166, 181, 203, .2); --line-hi: rgba(216, 224, 235, .6); --ink: #eef1f6; --muted: #aebbd6; --dim: #7383a8; --blood: #7f93ad; --ember: #c7dbe4; --flame: #e3edf5; --amber: #f4f8fc; --on-fire: var(--on-gold); --fire: var(--leaf-flat); --f-display: 'Cinzel', 'GFS Didot', 'Trajan Pro', Georgia, serif; --f-body: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --f-mono: 'Cinzel', 'EB Garamond', Georgia, serif; --f-num: 'EB Garamond', Georgia, serif; --f-deco: 'Cinzel Decorative', 'Cinzel', 'GFS Didot', Georgia, serif; --f-wheel: var(--f-display); /* the numbers on the wheel's canvas (hub.js) */ --f-serif: var(--f-display); --f-blood: var(--f-display); --r: 6px; --r-sm: 4px; --chamfer: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); --chamfer-sm: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); /* stone tablets: an outline with chipped corners and a few nicks along the edges */ --slab: polygon(0 7px, 4px 2px, 11px 0, 41% 1px, 44% 0, calc(100% - 15px) 0, calc(100% - 8px) 2px, 100% 8px, calc(100% - 1px) 46%, 100% 54%, 100% calc(100% - 9px), calc(100% - 5px) calc(100% - 2px), calc(100% - 13px) 100%, 63% calc(100% - 1px), 59% 100%, 9px 100%, 2px calc(100% - 4px), 0 calc(100% - 10px), 1px 58%, 0 50%); --slab-sm: polygon(0 5px, 3px 1px, 8px 0, calc(100% - 10px) 0, 100% 5px, 100% calc(100% - 6px), calc(100% - 4px) 100%, 55% 100%, 52% calc(100% - 1px), 6px 100%, 0 calc(100% - 7px)); /* fine pores and weathered patches in the stone */ --stone-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .13 0 0 0 0 .2 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --stone-blot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .26 1.7 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); --stone-face: var(--stone-grain) 0 0 / 180px auto, var(--stone-blot) 30% 40% / 420px auto, linear-gradient(180deg, rgba(248, 249, 251, .45), rgba(248, 249, 251, 0) 45%, rgba(18, 28, 42, .22)); --slate-bevel: inset 0 2px 0 rgba(238, 241, 246, .2), inset 0 -2px 0 rgba(0, 0, 0, .5), inset 2px 0 0 rgba(238, 241, 246, .08), inset -2px 0 0 rgba(0, 0, 0, .3), inset 0 0 12px rgba(0, 0, 0, .45); --lime-bevel: inset 0 2px 0 rgba(249, 250, 252, .65), inset 0 -2px 0 rgba(35, 46, 64, .55), inset 0 0 10px rgba(32, 44, 63, .4); background: var(--nyx); } /* ---------- ground ---------- */ html.naos body { background: radial-gradient(110% 55% at 50% -8%, rgba(40, 88, 183, .38), transparent 62%), radial-gradient(70% 40% at 50% 110%, rgba(61, 126, 255, .12), transparent 70%), var(--nyx) !important; color: var(--ink); /* classical text face; font-size-adjust keeps the master's sizes readable with Garamond's small x-height */ font-family: var(--f-body) !important; font-size-adjust: .47; font-kerning: normal; font-feature-settings: 'kern', 'liga', 'onum' 0; text-rendering: optimizeLegibility; } html.naos .grain { opacity: .05; } html.naos ::selection { background: rgba(166, 181, 203, .35); color: #fff; } html.naos :focus-visible { outline: 2px solid var(--gold-hi) !important; outline-offset: 3px; } /* gold inscriptions share one light source */ html.naos .naos-leaf, html.naos .title .word.is-accent .char, html.naos .hero__claim em, html.naos .dai__q, html.naos .tier--pop .tier__name, html.naos .ptx__name i, html.naos .naos-stat__big, html.naos .naos-about__name { background: var(--leaf) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ---------- typography: Cinzel, heavy and carved ---------- */ html.naos .title, html.naos .hero__claim, html.naos .pcard__name, html.naos .tile__title, html.naos .tier__name, html.naos .next-page__name, html.naos .drop__title, html.naos .modal__title, html.naos .sgate__title, html.naos .kpi b, html.naos .nav__brand span, html.naos .ptx__name { font-family: var(--f-display) !important; -webkit-mask: none !important; mask: none !important; } html.naos .title { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .02em !important; word-spacing: 0 !important; line-height: 1.04 !important; font-size: clamp(36px, 6vw, 98px) !important; } /* carved marble letters; accent words are gold inlay in the same letterform */ html.naos .title .char { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%), var(--marble-tex) 0 0 / 420px auto !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .6)) drop-shadow(0 8px 14px rgba(2, 6, 20, .5)); } html.naos .title .char:nth-child(3n+1) { background-position: 0 0, -130px -60px !important; } html.naos .title .char:nth-child(3n+2) { background-position: 0 0, -260px -170px !important; } html.naos .title .word { overflow: visible !important; } html.naos .title .word.is-accent .char, html.naos .hero__claim em { background: var(--leaf-accent) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; } html.naos .title .word.is-accent { font-family: var(--f-display) !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: .02em !important; margin-left: 0 !important; padding-right: 0; } html.naos .title .word.is-accent .char { filter: drop-shadow(0 2px 0 rgba(10, 17, 28, .65)) drop-shadow(0 0 26px rgba(166, 181, 203, .3)); animation: none !important; } html.naos .lead { color: #b6c2dc !important; font-size: clamp(16px, 1.2vw, 18.5px) !important; line-height: 1.65 !important; letter-spacing: 0 !important; } /* eyebrows: a small inscription between two laurel sprigs */ html.naos .eyebrow { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font: 700 13px/1 var(--f-display) !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--gold) !important; gap: 12px !important; } html.naos .eyebrow::before, html.naos .eyebrow::after { content: '' !important; display: block; width: 32px !important; height: 13px !important; flex: none; background: var(--gold) !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; transform: none; } html.naos .eyebrow::after { transform: scaleX(-1); } /* ---------- buttons: weathered stone tablets with carved letters ---------- */ html.naos .btn { border-radius: 0 !important; clip-path: none !important; border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; overflow: visible; font: 700 15px/1 var(--f-display) !important; letter-spacing: .12em !important; text-transform: uppercase; padding: 19px 30px; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); transition: transform .35s var(--ease), filter .35s var(--ease), color .3s; } html.naos .btn--sm { padding: 14px 20px; font-size: 13px !important; } /* the slab: chipped outline, worn bevel, grain */ html.naos .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: var(--slab); background: var(--stone-face), var(--stone, #dde4ec); box-shadow: inset 0 2px 0 rgba(249, 250, 252, .65), inset 0 -3px 0 rgba(35, 46, 64, .55), inset 2px 0 0 rgba(249, 250, 252, .3), inset -3px 0 0 rgba(35, 46, 64, .35), inset 0 0 16px rgba(32, 44, 63, .4); transition: filter .35s var(--ease); } /* the carved frame a few millimetres in; it fills with gold light on hover */ html.naos .btn::after { content: '' !important; display: block !important; position: absolute; inset: 5px; z-index: -1; pointer-events: none; background: none !important; animation: none !important; transform: none !important; border: 1px solid; border-color: rgba(31, 43, 60, .5) rgba(245, 247, 250, .45) rgba(245, 247, 250, .45) rgba(31, 43, 60, .5); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); } html.naos .btn--sm::after { inset: 4px; } html.naos .btn .btn__fill { display: none !important; } html.naos .btn:hover { transform: translateY(-2px); filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); } html.naos .btn:hover::before { filter: brightness(1.07); } html.naos .btn:hover::after { border-color: rgba(166, 181, 203, .95); box-shadow: 0 0 10px rgba(166, 181, 203, .45), inset 0 0 8px rgba(166, 181, 203, .3); } html.naos .btn:active { transform: translateY(1px); } /* light limestone, the letters cut into it */ html.naos .btn--fire { --stone: #dde4ec; color: #141e2e !important; text-shadow: 0 1px 0 rgba(245, 247, 250, .65), 0 -1px 0 rgba(12, 21, 33, .35); } html.naos .btn--fire .btn__icon { color: #141e2e; } /* dark slate, gold leaf in the letters */ html.naos .btn--glass, html.naos .btn--ghost { --stone: #2c3550; color: #d1d9e5 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(230, 235, 242, .12); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.naos .btn--glass::before, html.naos .btn--ghost::before { box-shadow: inset 0 2px 0 rgba(238, 241, 246, .22), inset 0 -3px 0 rgba(0, 0, 0, .5), inset 2px 0 0 rgba(238, 241, 246, .1), inset -3px 0 0 rgba(0, 0, 0, .3), inset 0 0 16px rgba(0, 0, 0, .45); } html.naos .btn--glass::after, html.naos .btn--ghost::after { border-color: rgba(0, 0, 0, .45) rgba(230, 235, 242, .18) rgba(230, 235, 242, .18) rgba(0, 0, 0, .45); } html.naos .btn--glass:hover, html.naos .btn--ghost:hover { color: #dfe5ef !important; box-shadow: none !important; } html.naos .link-btn { color: var(--gold-hi) !important; } /* chips and pills: status, not buttons */ html.naos .chip, html.naos .online-pill, html.naos .ember-chip, html.naos .drop-pill, html.naos .status-pill { border-radius: 3px !important; border-color: rgba(166, 181, 203, .32) !important; background: rgba(5, 15, 42, .74) !important; } html.naos .tag { background: var(--leaf-flat) !important; color: var(--on-gold) !important; border-radius: 2px !important; } /* ---------- small controls in stone too: toggles, icon buttons, quiz answers, votes, amounts, links ---------- */ html.naos :is(.seg, .lang, .icon-btn, .nav__acc, .opt, .game__vote, .bet__amt button, .social, .rsvp) { border: 0 !important; border-radius: 0 !important; clip-path: var(--slab-sm); background: var(--stone-face), #2c3550 !important; color: #d1d9e5 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); box-shadow: var(--slate-bevel) !important; transition: filter .3s, transform .3s var(--ease), translate .4s var(--ease); } html.naos :is(.seg, .icon-btn, .nav__acc, .opt, .game__vote, .bet__amt button, .social, .rsvp):hover { filter: brightness(1.15); } /* the event's "I'm in" button: a small carved tablet */ html.naos .rsvp { padding: 11px 16px 10px !important; font: 700 13px/1 var(--f-display) !important; letter-spacing: .1em !important; text-transform: uppercase; } html.naos :is(.icon-btn, .nav__acc, .game__vote, .social) svg { color: #d1d9e5 !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); } html.naos .lang { padding: 4px !important; } html.naos .lang__btn { border-radius: 0 !important; background: none !important; color: #d1d9e5 !important; font-family: var(--f-display) !important; font-weight: 700 !important; } /* the chosen one, or the main action: light limestone with the letters cut in */ html.naos :is(.seg.is-active, .seg[aria-pressed="true"], .lang__btn.is-active, .icon-btn--fire, .game__vote.is-on, .bet__amt button.is-active, .opt.is-pick, .nav__plusm, .rsvp.is-on) { border: 0 !important; border-radius: 0 !important; clip-path: var(--slab-sm); background: var(--stone-face), #dde4ec !important; color: #141e2e !important; text-shadow: 0 1px 0 rgba(245, 247, 250, .6); box-shadow: var(--lime-bevel) !important; } html.naos :is(.icon-btn--fire, .game__vote.is-on, .nav__plusm) svg { color: #141e2e !important; filter: drop-shadow(0 1px 0 rgba(245, 247, 250, .6)); } /* quiz feedback stays clear: verdigris for right, terracotta for wrong */ html.naos .opt.is-right { background: var(--stone-face), #3f5f49 !important; color: #e9f5e4 !important; } html.naos .opt.is-wrong { background: var(--stone-face), #6b3a2c !important; color: #f6e2d6 !important; } /* the hub of the wheel: a limestone coin */ html.naos .wheel__btn { background: var(--stone-face), #dde4ec !important; border: 2px solid rgba(23, 34, 51, .55) !important; color: #141e2e !important; text-shadow: 0 1px 0 rgba(245, 247, 250, .6); box-shadow: inset 0 3px 0 rgba(249, 250, 252, .6), inset 0 -4px 0 rgba(35, 46, 64, .5), inset 0 0 18px rgba(32, 44, 63, .4), 0 8px 18px rgba(0, 0, 0, .55) !important; } html.naos .av { box-shadow: 0 0 0 1.5px rgba(166, 181, 203, .55); } /* drachmas: the gold coin replaces the generic glyph */ html.naos .ember-chip svg { display: none; } html.naos .ember-chip::before { content: ''; width: 18px; height: 18px; flex: none; background: url(img/coin-64.png) center / contain no-repeat; } /* ---------- surfaces: lapis in a double gold frame ---------- */ html.naos .glass, html.naos .tile, html.naos .ev, html.naos .earn__item, html.naos .tier, html.naos .vod, html.naos .kpi, html.naos .drop, html.naos .modal__box, html.naos .vmodal__box { border-radius: var(--r) !important; background: linear-gradient(180deg, rgba(16, 30, 92, .8), rgba(7, 8, 32, .92)), var(--lapis-tex) center / 900px auto !important; border: 1px solid rgba(182, 194, 211, .3) !important; box-shadow: inset 0 0 0 5px rgba(4, 11, 32, .55), inset 0 0 0 6px rgba(166, 181, 203, .1), 0 30px 60px -36px rgba(0, 0, 0, .9) !important; } html.naos .tile__title { font-weight: 700 !important; font-size: 19px !important; letter-spacing: .06em !important; text-transform: none !important; } html.naos .beam::before { background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--gold-hi) 80%, transparent 90%) !important; } html.naos .beam::after { background: radial-gradient(closest-side, rgba(166, 181, 203, .35), transparent) !important; } /* ---------- nav: an entablature with a meander frieze ---------- */ html.naos .nav { background: linear-gradient(180deg, rgba(4, 11, 32, .94), rgba(4, 11, 32, .58)) !important; border-bottom: 1px solid rgba(166, 181, 203, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html.naos .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 8px; background: var(--meander) 0 0 / auto 8px repeat-x; opacity: .55; pointer-events: none; } html.naos .nav__brand img { border-radius: 50% !important; box-shadow: 0 0 0 1.5px var(--gold), 0 0 18px rgba(166, 181, 203, .35); } html.naos .nav__brand span { font-weight: 800 !important; font-size: 19px !important; letter-spacing: .1em !important; background: var(--silver-leaf); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.naos .nav__links { background: none !important; border: 0 !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 2px !important; } html.naos .nav__links a { font: 700 13px/1 var(--f-display) !important; letter-spacing: .1em; text-transform: uppercase; color: #c5cee3 !important; border-radius: 0 !important; background: none !important; position: relative; padding: 10px 11px !important; } html.naos .nav__links a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px; background: var(--leaf-flat); transform: scaleX(0); transition: transform .45s var(--ease); } html.naos .nav__links a:hover { color: var(--gold-hi) !important; } html.naos .nav__links a:hover::after { transform: scaleX(1); } /* the current page sits on a small slate tablet */ html.naos .nav__links a { isolation: isolate; } html.naos .nav__links a.is-active, html.naos .nav__links a[aria-current] { color: #d1d9e5 !important; background: none !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); } html.naos .nav__links a.is-active::before, html.naos .nav__links a[aria-current]::before { content: ''; position: absolute; inset: 1px -2px; z-index: -1; pointer-events: none; clip-path: var(--slab-sm); background: var(--stone-face), #2c3550; box-shadow: inset 0 2px 0 rgba(238, 241, 246, .2), inset 0 -2px 0 rgba(0, 0, 0, .5), inset 0 0 12px rgba(0, 0, 0, .45); } html.naos .nav__links a.is-active::after, html.naos .nav__links a[aria-current]::after { transform: scaleX(0) !important; } html.naos .nav__links .nav__plus { color: var(--gold) !important; } html.naos .online-pill__dot { background: var(--aegean-hi) !important; box-shadow: 0 0 10px var(--aegean-hi) !important; } /* the inscription type makes the bar wider than the template's: on tablets and smaller computers the online count gives way first where the bar is fullest (the team's Studio button, the join button), then the links and the name close up a little, so nothing is cut at the right edge (phones: style.css) */ @media (min-width: 761px) and (max-width: 900px), (min-width: 1181px) and (max-width: 1480px) { html.naos .nav__right:has(> .nav__studio:not([hidden]), > .nav__join:not([hidden])) > .online-pill { display: none; } } @media (min-width: 1181px) and (max-width: 1360px) { html.naos .nav__links a { padding: 10px 6px !important; letter-spacing: .05em; } html.naos .nav__links a::after { left: 6px; right: 6px; } html.naos .nav__brand span { font-size: 16px !important; letter-spacing: .08em !important; } } /* only the narrowest computer widths: the team's Studio button is its round icon (label for screen readers and as title). Above 1220px the labelled button fits, also with 999.999 drachmas and a 17px Windows scroll bar */ @media (min-width: 1181px) and (max-width: 1220px) { html.naos .nav__studio { width: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50% !important; } html.naos .nav__studio span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* meander scroll gauge (skin.js sets --p) */ .naos-gauge { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 81; pointer-events: none; background: var(--meander) 0 0 / auto 6px repeat-x; clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); filter: drop-shadow(0 0 4px rgba(216, 224, 235, .6)); } /* phone dock: a dark slate slab like the second buttons, gold leaf in the carved icons; the current page is a small limestone tablet set into it */ html.naos .dock { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate; padding: 8px 9px !important; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); } html.naos .dock::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: var(--slab); background: var(--stone-face), #2c3550; box-shadow: inset 0 2px 0 rgba(238, 241, 246, .22), inset 0 -3px 0 rgba(0, 0, 0, .5), inset 2px 0 0 rgba(238, 241, 246, .1), inset -3px 0 0 rgba(0, 0, 0, .3), inset 0 0 18px rgba(0, 0, 0, .45); } html.naos .dock::after { content: ''; position: absolute; inset: 4px; z-index: -1; pointer-events: none; border: 1px solid; border-color: rgba(0, 0, 0, .45) rgba(230, 235, 242, .18) rgba(230, 235, 242, .18) rgba(0, 0, 0, .45); } html.naos .dock__it { border-radius: 0 !important; background: none !important; color: #cbd3df !important; } html.naos .dock__it svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .75)); } html.naos .dock__it::before { border-radius: 0 !important; clip-path: var(--slab-sm); box-shadow: inset 0 2px 0 rgba(249, 250, 252, .65), inset 0 -2px 0 rgba(35, 46, 64, .55), inset 0 0 10px rgba(32, 44, 63, .4) !important; background: var(--stone-face), #dde4ec !important; } html.naos .dock__it.is-active { color: #141e2e !important; } html.naos .dock__it.is-active svg { filter: drop-shadow(0 1px 0 rgba(245, 247, 250, .6)); } html.naos .dock__sep { background: rgba(0, 0, 0, .5) !important; box-shadow: 1px 0 0 rgba(230, 235, 242, .16); } html.naos .dock__me { border-radius: 50% !important; } /* the join button: a limestone coin */ html.naos .dock__me--join { background: var(--stone-face), #dde4ec !important; color: #141e2e !important; animation: none !important; box-shadow: inset 0 2px 0 rgba(249, 250, 252, .65), inset 0 -3px 0 rgba(35, 46, 64, .55), inset 0 0 12px rgba(32, 44, 63, .4), 0 0 0 1px rgba(15, 23, 34, .5) !important; } /* quick play (test player): a round limestone coin with the carved icon in the bottom-right corner (on phones and tablets just above the dock), so it covers next to nothing; the label stays its accessible name. With a mouse it opens into the full tablet with the label on hover or keyboard focus. */ html.naos .quick-play { left: auto !important; right: max(16px, env(safe-area-inset-right, 0px)) !important; width: 56px; height: 56px; padding: 0 !important; gap: 0; justify-content: center; border-radius: 50% !important; clip-path: none; background: none !important; isolation: isolate; animation: none !important; color: #141e2e !important; box-shadow: none !important; font-family: var(--f-display) !important; font-weight: 700 !important; letter-spacing: .04em !important; text-shadow: 0 1px 0 rgba(245, 247, 250, .6); filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .6)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); transition: transform .35s var(--ease); } html.naos .quick-play::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: none; border-radius: inherit; background: var(--stone-face), #dde4ec; box-shadow: inset 0 2px 0 rgba(249, 250, 252, .65), inset 0 -3px 0 rgba(35, 46, 64, .55), inset 0 0 16px rgba(32, 44, 63, .4); } html.naos .quick-play::after { content: ''; position: absolute; inset: 4px; z-index: -1; pointer-events: none; border-radius: inherit; border: 1px solid; border-color: rgba(31, 43, 60, .5) rgba(245, 247, 250, .45) rgba(245, 247, 250, .45) rgba(31, 43, 60, .5); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); } html.naos .quick-play svg { width: 26px; height: 26px; } html.naos .quick-play:hover { transform: translateY(-2px); } html.naos .quick-play:hover::after { border-color: rgba(166, 181, 203, .95); box-shadow: 0 0 10px rgba(166, 181, 203, .45), inset 0 0 8px rgba(166, 181, 203, .3); } html.naos .quick-play span { display: none; } html.naos .quick-play small, html.naos .quick-play span { color: #141e2e !important; opacity: .9; } @media (hover: hover) and (pointer: fine) { html.naos .quick-play:is(:hover, :focus-visible) { width: auto; padding: 12px 18px 12px 14px !important; gap: 10px; border-radius: 0 !important; } html.naos .quick-play:is(:hover, :focus-visible)::before { clip-path: var(--slab); } html.naos .quick-play:is(:hover, :focus-visible) span { display: grid; } } @media (max-width: 1180px) { html.naos .quick-play { width: 52px; height: 52px; } } /* desktop: toasts sit above the coin, as the master does where the dock shows */ @media (min-width: 1181px) { html.naos body:has(.quick-play:not([hidden])) .toasts { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } } /* background music (skin.js): a smaller slate coin in the bottom-left corner, level with the quick-play coin on the right (above the dock where the dock shows); the speaker glows while the music plays. It steps aside like the dock while someone types on a phone and in the game; the end of the page keeps room for it. Where the hero's buttons reach the corner (medium windows) it steps up over them (--lift, skin.js). */ html.naos .naos-music { position: fixed; z-index: 90; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--stone-face), #2c3550; color: #d1d9e5; box-shadow: var(--slate-bevel); filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .6)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); transform: translateY(calc(var(--lift, 0px) * -1)); transition: transform .35s var(--ease); } html.naos .naos-music svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); transition: color .3s; } html.naos .naos-music:hover { transform: translateY(calc(var(--lift, 0px) * -1 - 2px)); } html.naos .naos-music.is-playing svg { color: var(--gold-hi); filter: drop-shadow(0 0 6px rgba(238, 245, 251, .6)); } html.naos body.selo-full .naos-music { display: none; } /* in the Studio's top bar: a plain round button like the bar's own; on the smallest phones the word "Studio" next to the crown gives way for it (the crown stays, its label is the button's name) */ html.naos .naos-music.is-inbar { position: static; flex: none; width: 36px; height: 36px; filter: none; } html.naos .naos-music.is-inbar svg { width: 18px; height: 18px; } @media (max-width: 345px) { html.naos .sx-top:has(.naos-music) .sx-top__brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } html.naos body:has(.naos-music) .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 1180px) { html.naos .naos-music { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } html.naos body:has(.naos-music) .footer { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } html.naos body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"]), textarea, [contenteditable="true"]):focus) .naos-music:not(.is-inbar) { display: none; } } /* cursor and loader */ html.naos .cursor__ring { border-color: rgba(216, 224, 235, .7) !important; } html.naos .cursor__dot { background: var(--gold-hi) !important; } html.naos .loader { background: radial-gradient(60% 60% at 50% 50%, #0a1d50, var(--nyx) 70%) !important; } /* the silver logo sits inside the ring (the ring is min(56vmin, 360px) wide with the circle at 90 %); it carries the name (JANNI_KIP on its ribbon), so the spelled-out name stays hidden */ html.naos .loader::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(42vmin, 270px); aspect-ratio: 1; transform: translate(-50%, -52%); background: url(img/emblem.webp) center / contain no-repeat; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(61, 126, 255, .35)); z-index: 1; } html.naos .loader__progress { stroke: var(--silver) !important; filter: drop-shadow(0 0 8px rgba(120, 170, 255, .8)) !important; } html.naos .loader__track { stroke: rgba(199, 219, 228, .15) !important; } html.naos .loader__word { visibility: hidden !important; } html.naos .loader__count { color: var(--steel) !important; font-family: var(--f-display) !important; margin-top: calc(min(56vmin, 360px) * .3) !important; position: relative; z-index: 2; } /* page transition title */ html.naos .ptx__name { font-weight: 900 !important; font-family: var(--f-deco) !important; letter-spacing: .04em !important; } html.naos .ptx__num, html.naos .ptx__quote { font-family: var(--f-display) !important; color: var(--gold) !important; letter-spacing: .3em; } /* ========================================================================== HERO — the temple Layers, back to front: scene (still + video) · rays · fire · medallion · temple cut-out (only while the medallion rises behind it) · flash · copy. ========================================================================== */ html.naos .hero { background: var(--nyx); isolation: isolate; } .naos-scene, .naos-front { position: absolute; inset: -3%; pointer-events: none; overflow: hidden; transform: translate3d(calc((var(--gx) - .5) * -18px), calc((var(--gy) - .5) * -10px), 0); transform-origin: 50% 40%; } /* the night before the sunrise and the dimming on scroll: an overlay, never a filter on the video */ .naos-dim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000; opacity: 0; } /* the flight is shown 1:1: no overscan and no pointer parallax, so the browser does not resample it (a 6 % zoom plus sub-pixel shifts cost about 40 % of the fine detail). It only scales during the intro and when scrolling away */ /* the flight at its own size: it only fills the hero (cover), it is never zoomed in */ .naos-scene { z-index: 0; inset: 0; transform: none; } /* a light black veil over the flight so the wordmark and the copy carry */ .naos-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 60% at 50% 46%, rgba(2, 4, 14, .28), rgba(2, 4, 14, .5) 100%); } /* ---------- the logo over the flight (img/emblem.webp, the silver JK logo, animated by skin.js) ---------- about 5.5 s over the still first frame: wireframe → shards → silver flash and a coin turn → light → it breaks into shards just as the camera takes off */ /* below the JANNI_KIP of the first frame, never over it */ .naos-logo { position: absolute; z-index: 5; left: 50%; top: 51%; width: clamp(210px, 19vw, 350px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; visibility: hidden; } .naos-logo.is-in { visibility: visible; } .naos-logo__scroll, .naos-logo__in, .naos-logo__float, .naos-logo__art { position: absolute; inset: 0; } .naos-logo__in { transform: translate3d(calc((var(--gx, .5) - .5) * 16px), calc((var(--gy, .3) - .3) * 10px), 0); } .naos-logo.is-in .naos-logo__float { animation: naosLogoFloat 7s ease-in-out 2.4s infinite; } @keyframes naosLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .naos-logo__cv, .naos-logo__medal, .naos-logo__shine { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } .naos-logo__cv { inset: -60%; width: 220%; height: 220%; } /* the sharp logo takes over from the shards */ .naos-logo__medal { opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); } .naos-logo.is-solid .naos-logo__medal, .naos-logo.is-still .naos-logo__medal { opacity: 1; } .naos-logo.is-still .naos-logo__cv { display: none; } /* and it goes (the still medallion with reduced motion has no shards to break into) */ .naos-logo.is-out .naos-logo__medal { opacity: 0; } /* one coin turn */ .naos-logo.is-spin .naos-logo__art { animation: mkSpin 1s cubic-bezier(.65, 0, .35, 1) both; } @keyframes mkSpin { from { transform: perspective(900px) rotateY(0); } to { transform: perspective(900px) rotateY(360deg); } } /* a band of light over the silver, cut to the logo */ .naos-logo__shine { opacity: 0; background: linear-gradient(105deg, transparent 40%, rgba(236, 245, 255, .55) 50%, transparent 60%) 160% 0 / 260% 100% no-repeat; -webkit-mask: var(--mk-mask) center / 100% 100% no-repeat; mask: var(--mk-mask) center / 100% 100% no-repeat; } .naos-logo.is-shine .naos-logo__shine { opacity: 1; animation: mkShine .8s cubic-bezier(.5, 0, .3, 1) both; } @keyframes mkShine { from { background-position: 160% 0; } to { background-position: -60% 0; } } /* a soft dark halo behind it so the flight steps back */ .naos-logo__dark { position: absolute; inset: -20%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(1, 3, 10, .82), rgba(1, 3, 10, .55) 55%, rgba(1, 3, 10, 0) 100%); transition: opacity 1s ease .1s; } .naos-logo.is-in .naos-logo__dark { opacity: 1; } .naos-logo__glow { position: absolute; inset: -18%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(24, 58, 140, .5), rgba(120, 165, 255, .14) 55%, transparent 75%); filter: blur(18px); transition: opacity 1.2s ease; } .naos-logo.is-flash .naos-logo__glow { opacity: 1; animation: naosLogoGlow 4.5s ease-in-out 1s infinite alternate; } @keyframes naosLogoGlow { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.05); } } .naos-logo.is-out .naos-logo__dark, .naos-logo.is-out .naos-logo__glow { opacity: 0 !important; transition: opacity .9s ease; animation: none; } .naos-logo__burst { position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(closest-side, rgba(240, 247, 255, .85), rgba(150, 190, 255, .5) 25%, rgba(50, 100, 220, .25) 50%, transparent 72%); } .naos-logo.is-flash .naos-logo__burst { animation: naosLogoBurst 1.1s cubic-bezier(.2, .7, .2, 1) both; } @keyframes naosLogoBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } } /* desktop: the flight sits a little lower so the JANNI_KIP of its first frame clears the nav bar */ /* computers: the flight hangs from just under the nav bar and is cut only at the bottom, so the JANNI_KIP at the top of the frame is always whole, also in wide and low windows */ @media (min-width: 761px) { .naos-scene { top: 72px; bottom: 0; } .naos-scene img, .naos-scene video { object-position: 50% 0 !important; } /* the logo of the intro sits under that name: the frame is 56.25vw high, the name ends at about a fifth of it */ .naos-logo { width: max(180px, min(19vw, 34vh, 350px)); top: calc(72px + 12vw + max(180px, min(19vw, 34vh, 350px)) / 2); } } .naos-front { z-index: 4; opacity: 0; } .naos-scene img, .naos-scene video, .naos-front img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; } .naos-scene video { opacity: 0; transition: opacity 1.4s ease; } .naos-scene video.is-on { opacity: 1; } .naos-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(64% 50% at 50% 40%, transparent 45%, rgba(4, 11, 32, .4) 100%), linear-gradient(180deg, rgba(4, 11, 32, .5) 0%, rgba(4, 11, 32, 0) 16%, rgba(4, 11, 32, 0) 58%, rgba(4, 11, 32, .78) 86%, var(--nyx) 100%); } .naos-rays { position: absolute; left: 50%; top: 35%; width: 80vmax; height: 80vmax; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(216, 224, 235, 0) 0deg 7deg, rgba(216, 224, 235, .55) 8deg, rgba(216, 224, 235, 0) 10deg 17deg); -webkit-mask: radial-gradient(closest-side, #000, transparent 72%); mask: radial-gradient(closest-side, #000, transparent 72%); animation: naosRays 120s linear infinite; transition: opacity 2.4s ease; } html.naos .hero.naos-dawn .naos-rays { opacity: .2; } @keyframes naosRays { to { transform: translate(-50%, -50%) rotate(360deg); } } .naos-flash { position: absolute; z-index: 5; left: 50%; top: 35%; width: 1px; height: 1px; pointer-events: none; } .naos-flash::before { content: ''; position: absolute; left: -45vmin; top: -45vmin; width: 90vmin; height: 90vmin; border-radius: 50%; opacity: 0; transform: scale(.2); background: radial-gradient(closest-side, rgba(249, 250, 252, 1), rgba(216, 224, 235, .85) 22%, rgba(166, 181, 203, .35) 48%, rgba(166, 181, 203, 0) 72%); } .naos-flash.is-on::before { animation: naosFlash 1.1s cubic-bezier(.2, .7, .2, 1) both; } @keyframes naosFlash { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.2); } } html.naos .hero__fire { z-index: 2; opacity: .85; /* only the corona around the medallion: the fire along the bottom edge would read as a flat gold bar */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%); } html.naos .hero__stage { z-index: 3; } /* the flight brings the name itself: the medallion (and the fire corona around it) stay out of the hero, the stage keeps its size so the layout below does not move */ html.naos .hero__stage { visibility: hidden; pointer-events: none; } html.naos .hero__fire { display: none !important; } html.naos .hero.naos-ready .hero__stage { animation: naosFloat 7s ease-in-out infinite; } @keyframes naosFloat { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(6px); } } /* the medallion, mounted on the temple front like a gold acroterion */ html.naos .emblem { width: min(35vmin, 360px) !important; margin-top: -25vh !important; isolation: isolate; } html.naos .emblem__glow { inset: -50% !important; background: radial-gradient(circle, rgba(239, 242, 247, .62), rgba(182, 194, 211, .2) 30%, rgba(61, 126, 255, .3) 47%, rgba(40, 88, 183, .1) 58%, transparent 68%) !important; filter: blur(16px) !important; } /* gold bezel */ html.naos .emblem::before { content: ''; position: absolute; inset: -8.5%; border-radius: 50%; z-index: 1; pointer-events: none; background: var(--leaf); background-attachment: fixed; -webkit-mask: radial-gradient(closest-side, transparent 84.5%, #000 85.5%, #000 98.5%, transparent 100%); mask: radial-gradient(closest-side, transparent 84.5%, #000 85.5%, #000 98.5%, transparent 100%); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(61, 126, 255, .4)); } /* laurel wreath, unfurls from the ribbon up */ html.naos .emblem::after { content: ''; position: absolute; left: -36%; right: -36%; top: -16%; bottom: -32%; z-index: -1; pointer-events: none; background: url(img/laurel.webp) 50% 100% / contain no-repeat; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65)); clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1), transform 1.6s cubic-bezier(.16, 1, .3, 1); } html.naos .hero.naos-intro .emblem::after { clip-path: inset(100% 0 0 0); transform: scale(.86); } html.naos .hero.naos-crowned .emblem::after { clip-path: inset(0 0 0 0); transform: none; } html.naos .emblem__tilt { z-index: 2; } html.naos .emblem__img { -webkit-mask-image: radial-gradient(circle closest-side, #000 97%, transparent 99.5%) !important; mask-image: radial-gradient(circle closest-side, #000 97%, transparent 99.5%) !important; backface-visibility: visible; } html.naos .emblem__img.naos-flip { animation: naosFlip 1.25s cubic-bezier(.3, .1, .2, 1) both; } @keyframes naosFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(720deg); } } /* a band of light passes over the medallion now and then */ .naos-glint { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 3; } .naos-glint::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; transform: translateX(-160%) rotate(22deg); background: linear-gradient(90deg, transparent, rgba(245, 247, 250, .55) 45%, rgba(255, 255, 255, .85) 50%, rgba(245, 247, 250, .55) 55%, transparent); animation: naosSweep 8s cubic-bezier(.5, 0, .3, 1) 3.4s infinite; } @keyframes naosSweep { 0% { transform: translateX(-160%) rotate(22deg); } 22%, 100% { transform: translateX(420%) rotate(22deg); } } /* the ring legend is engraved in the bezel */ html.naos .emblem__text { z-index: 3; inset: -8.5% !important; width: 117% !important; height: 117% !important; } html.naos .emblem__text text { font: 700 11px/1 var(--f-display) !important; letter-spacing: 3.6px !important; fill: #0f1b2d !important; stroke: rgba(239, 242, 247, .35) !important; stroke-width: .5px !important; paint-order: normal !important; } /* the drachma: a real coin that flips every few seconds */ html.naos .dai-badge { z-index: 5; width: 30% !important; right: -16% !important; top: -8% !important; } html.naos .dai-badge__core { inset: 17% !important; background: url(img/coin.webp) center / contain no-repeat !important; box-shadow: none !important; border-radius: 50%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); animation: naosCoin 6s ease-in-out 4s infinite !important; } html.naos .dai-badge__core svg { display: none; } html.naos .dai-badge__ring text { font: 700 18px/1 var(--f-display) !important; fill: var(--gold-hi) !important; letter-spacing: 3px !important; } /* the full-screen stamp: the display font is wider than the drip font, so «Team Janni!» fits a phone */ html.naos .dai-stamp__txt { font-size: clamp(34px, 12.5vw, 200px); } @keyframes naosCoin { 0%, 78% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } html.naos .hero__bottom { background: linear-gradient(0deg, rgba(4, 11, 32, .94), rgba(4, 11, 32, .52) 55%, transparent) !important; align-items: flex-end; } html.naos .hero__claim { font-weight: 800 !important; font-size: clamp(30px, 3.8vw, 62px) !important; line-height: 1.06 !important; text-transform: uppercase !important; letter-spacing: .03em !important; color: var(--marble) !important; background: var(--silver-leaf); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .7)) drop-shadow(0 16px 30px rgba(2, 6, 20, .75)); } html.naos .hero__claim em { font-family: var(--f-display) !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: .03em !important; text-shadow: none !important; filter: drop-shadow(0 2px 0 rgba(10, 17, 28, .65)); } /* glint: a highlight sweeps through the gold line */ html.naos .hero__claim em.naos-glint-on { background: linear-gradient(105deg, transparent calc(var(--sweep) - 12%), rgba(255, 255, 255, .95) var(--sweep), transparent calc(var(--sweep) + 12%)) 0 0 / 100% 100% no-repeat, var(--leaf) !important; background-attachment: scroll, fixed !important; -webkit-background-clip: text !important; background-clip: text !important; animation: naosSweepText 1.6s cubic-bezier(.5, 0, .2, 1) both; } @keyframes naosSweepText { from { --sweep: -20%; } to { --sweep: 125%; } } html.naos .hero__free { font: 700 13px/1.3 var(--f-display) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) !important; } html.naos .chip--live { font-family: var(--f-body) !important; } html.naos .drop-pill { font-family: var(--f-body) !important; } html.naos .drop-pill b { color: var(--gold-hi); } /* next stream: a marble stele with a pediment */ html.naos .next-card { position: relative; padding: 36px 22px 20px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 40%), var(--marble-tex) 30% 40% / 640px auto !important; color: var(--on-marble) !important; clip-path: polygon(0 26px, 50% 0, 100% 26px, 100% 100%, 0 100%); box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); } html.naos .next-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; padding: 0; border-radius: 0 !important; background: linear-gradient(var(--gold), var(--gold)) 0 26px / 100% 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 3px no-repeat !important; -webkit-mask: none !important; mask: none !important; animation: none !important; } html.naos .next-card::after { display: none !important; } html.naos .next-card .label, html.naos .next-card__top { color: var(--gold-lo) !important; } html.naos .next-card .label { font: 700 12px/1 var(--f-display) !important; letter-spacing: .2em !important; text-transform: uppercase !important; } html.naos .next-card__top .mono { color: #50607f !important; } html.naos .next-card__day { font: 800 25px/1.1 var(--f-display) !important; letter-spacing: .02em !important; color: var(--on-marble) !important; } html.naos .next-card__game { color: #3d4c6e !important; } html.naos .countdown div { background: rgba(11, 35, 96, .07) !important; border: 1px solid rgba(42, 72, 115, .45) !important; border-radius: 2px !important; } html.naos .countdown b { font: 700 26px/1 var(--f-display) !important; color: var(--on-marble) !important; } html.naos .countdown small { color: var(--gold-lo) !important; font-family: var(--f-display) !important; font-weight: 700; } /* ---------- trailer ---------- */ html.naos .trailer__frame { border-radius: 0 !important; border: 0 !important; box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px rgba(4, 11, 32, .9), 0 0 0 8px rgba(166, 181, 203, .35), 0 40px 80px -30px rgba(0, 0, 0, .9) !important; } html.naos .trailer__facts li { border-radius: 3px !important; border-color: rgba(166, 181, 203, .3) !important; background: rgba(5, 15, 42, .7) !important; } html.naos .trailer__facts svg { color: var(--gold) !important; } /* ---------- merch while it is coming: an inscription on a lapis tablet, the wish box like a slate ---------- */ html.naos .merch__soon { border-radius: 0 !important; border: 1px solid rgba(182, 194, 211, .3) !important; background: linear-gradient(180deg, rgba(16, 30, 92, .8), rgba(7, 8, 32, .92)), var(--lapis-tex) center / 900px auto !important; box-shadow: inset 0 0 0 5px rgba(4, 11, 32, .55), inset 0 0 0 6px rgba(166, 181, 203, .12), 0 30px 60px -36px rgba(0, 0, 0, .9) !important; } html.naos .merch__soon::before { content: ''; position: absolute; left: 7px; right: 7px; top: 8px; height: 10px; pointer-events: none; background: var(--meander) 0 0 / auto 10px repeat-x; opacity: .5; } html.naos .merch__soon-k { font: 900 clamp(40px, 7vw, 92px)/1.05 var(--f-deco) !important; letter-spacing: .04em !important; text-transform: uppercase; background: var(--leaf) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-size-adjust: none; padding-top: .12em; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .6)) drop-shadow(0 12px 22px rgba(2, 6, 20, .5)); } html.naos .merch__soon-t { font-family: var(--f-display) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--marble) !important; font-size-adjust: none; } html.naos .merch__soon-p { color: #b9c5de !important; font-family: var(--f-body) !important; font-size: 18px !important; line-height: 1.6 !important; } html.naos .merch__wish textarea { border-radius: 0 !important; background: rgba(4, 11, 32, .62) !important; border: 1px solid rgba(166, 181, 203, .35) !important; font-family: var(--f-body) !important; font-size: 17px !important; color: var(--marble) !important; } html.naos .merch__wish textarea::placeholder { color: #7f8db0; } html.naos .merch__wish-done, html.naos .merch__wish-guest { font-family: var(--f-body); font-size: 18px; } @media (hover: none), (pointer: coarse) { html.naos .merch__soon-k { background-attachment: scroll !important; } } /* ---------- Über Janni: his story in five chapters (skin.js builds it after the trailer) ---------- The numbers on a lapis band in a double silver frame, the chapters on a silver thread with coin medallions, the end like the last card of a film. Silver throughout; real gold only for his first place. */ html.naos .naos-about { padding-top: clamp(28px, 4vw, 56px); isolation: isolate; --no: 56px; } html.naos .naos-about::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 30% at 50% 26%, rgba(40, 88, 183, .2), transparent 72%), radial-gradient(45% 22% at 50% 97%, rgba(61, 126, 255, .13), transparent 70%); } html.naos .naos-about__wrap { max-width: 1200px; margin: 0 auto; } html.naos .naos-about__lead { max-width: 60ch; margin: 6px 0 0; } html.naos .naos-about__stats { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: linear-gradient(180deg, rgba(16, 30, 92, .8), rgba(7, 8, 32, .92)), var(--lapis-tex) center / 900px auto; border: 1px solid rgba(182, 194, 211, .3); box-shadow: inset 0 0 0 5px rgba(4, 11, 32, .55), inset 0 0 0 6px rgba(166, 181, 203, .12), 0 30px 60px -36px rgba(0, 0, 0, .9); } /* a meander frieze along the top, drawn when the band comes into view */ html.naos .naos-about__stats::before { content: ''; position: absolute; left: 7px; right: 7px; top: 8px; height: 10px; pointer-events: none; background: var(--meander) 0 0 / auto 10px repeat-x; opacity: .5; clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.16, 1, .3, 1) .35s; } html.naos .naos-about__stats.naos-seen::before { clip-path: inset(0 0 0 0); } html.naos .naos-stat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: clamp(36px, 3.6vw, 48px) 12px clamp(24px, 2.6vw, 34px); text-align: center; } html.naos .naos-stat + .naos-stat::before { content: ''; position: absolute; left: 0; top: 26%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(199, 219, 228, .42), transparent); } html.naos .naos-stat small { font: 600 12px/1.25 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } html.naos .naos-stat__num { display: inline-flex; align-items: center; gap: .2em; font-size: clamp(42px, 4.6vw, 68px); line-height: 1; } html.naos .naos-stat__big { font: 800 1em/1 var(--f-display); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: lining-nums; padding: .06em 0 .02em; font-size-adjust: none; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .6)) drop-shadow(0 10px 18px rgba(2, 6, 20, .5)); } html.naos .naos-stat__big i { font-style: normal; font-size: .44em; letter-spacing: .08em; margin-left: .14em; } html.naos .naos-stat__cap { font: 400 17px/1.35 var(--f-body); color: #b9c5de; max-width: 22ch; } /* first place: real gold between two laurel sprigs */ html.naos .naos-stat.is-first .naos-stat__big { background: var(--leaf-au) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 2px 0 rgba(10, 8, 2, .65)) drop-shadow(0 0 22px rgba(216, 182, 92, .28)); } html.naos .naos-stat.is-first .naos-stat__num::before, html.naos .naos-stat.is-first .naos-stat__num::after { content: ''; width: .62em; height: .27em; flex: none; background: var(--leaf-au-flat); -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; } html.naos .naos-stat.is-first .naos-stat__num::after { transform: scaleX(-1); } /* phones and tablets: the metal of the numbers and the name follows the element, not the screen (the skin keeps fixed backgrounds off touch screens, they break text clipping in WebKit) */ @media (hover: none), (pointer: coarse) { html.naos .naos-about .naos-stat__big, html.naos .naos-about .naos-stat.is-first .naos-stat__big, html.naos .naos-about .naos-about__name { background-attachment: scroll !important; } } html.naos .naos-about__honours { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; } html.naos .naos-about__honours li { display: inline-flex; align-items: center; gap: 10px; font: italic 500 17px/1.35 var(--f-body); color: #c9d4e8; } html.naos .naos-about__honours svg { width: 18px; height: 18px; flex: none; color: var(--gold); fill: currentColor; } /* the chapters: coin medallions on a silver thread; the thread is drawn with the scroll where the browser can */ html.naos .naos-about__story { list-style: none; margin: clamp(60px, 7.5vw, 104px) 0 0; padding: 0; position: relative; view-timeline: --naosStory block; } html.naos .naos-about__story::before { content: ''; position: absolute; left: calc(var(--no) / 2); top: calc(var(--no) / 2); bottom: 40px; width: 1px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(199, 219, 228, .55), rgba(199, 219, 228, .5) 85%, rgba(61, 126, 255, .85)); } html.naos .naos-ch { position: relative; display: grid; grid-template-columns: var(--no) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(18px, 2.6vw, 36px); padding-bottom: clamp(44px, 5vw, 68px); } html.naos .naos-ch:last-child { padding-bottom: 0; } html.naos .naos-ch__no { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: relative; z-index: 1; width: var(--no); height: var(--no); border-radius: 50%; display: grid; place-items: center; padding-top: .08em; font: 700 calc(var(--no) * .32)/1 var(--f-display); letter-spacing: .04em; color: var(--gold-hi); font-size-adjust: none; background: radial-gradient(circle at 50% 30%, #1d3c92, #0a0d30 72%); box-shadow: 0 0 0 1px rgba(199, 219, 228, .75), 0 0 0 5px var(--nyx), 0 0 0 6px rgba(199, 219, 228, .28), 0 12px 24px -10px rgba(0, 0, 0, .9); } html.naos .naos-ch:last-child .naos-ch__no { color: #fff; box-shadow: 0 0 0 1px var(--gold-hi), 0 0 0 5px var(--nyx), 0 0 0 6px rgba(199, 219, 228, .45), 0 0 36px rgba(61, 126, 255, .6); } html.naos .naos-ch__tag { grid-column: 2; margin: 4px 0 9px; font: 600 12px/1.25 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } html.naos .naos-ch__title { grid-column: 2; margin: 0 0 12px; font: 700 clamp(23px, 2.5vw, 36px)/1.12 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--marble); text-wrap: balance; font-size-adjust: none; } html.naos .naos-ch__text { grid-column: 2; margin: 0; max-width: 62ch; font: 400 clamp(17px, 1.25vw, 19.5px)/1.62 var(--f-body); color: #b9c5de; } @media (min-width: 980px) { html.naos .naos-ch { grid-template-columns: var(--no) minmax(0, .85fr) minmax(0, 1.25fr); column-gap: clamp(28px, 3vw, 48px); } html.naos .naos-ch__text { grid-column: 3; grid-row: 1 / span 3; padding-top: 3px; } /* a hairline from the thread to the right between two chapters */ html.naos .naos-ch:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--no) + 28px); right: 0; bottom: clamp(22px, 2.5vw, 34px); height: 1px; background: linear-gradient(90deg, rgba(199, 219, 228, .22), rgba(199, 219, 228, 0)); } } /* the end: the silver seal, his last line, the name like the title card of a film */ html.naos .naos-about__end { margin: clamp(76px, 9vw, 132px) auto 0; max-width: 980px; display: flex; flex-direction: column; align-items: center; text-align: center; } html.naos .naos-about__seal { width: clamp(76px, 7vw, 96px); height: auto; margin-bottom: clamp(18px, 2vw, 26px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 24px rgba(61, 126, 255, .35)); } html.naos .naos-about__line { margin: 0; font: italic 500 clamp(28px, 3.7vw, 54px)/1.22 var(--f-body); color: var(--marble); text-wrap: balance; } html.naos .naos-about__name { margin: clamp(22px, 2.4vw, 30px) 0 0; font: 900 clamp(26px, 3vw, 44px)/1.1 var(--f-deco); letter-spacing: .08em; text-transform: uppercase; font-size-adjust: none; filter: drop-shadow(0 2px 0 rgba(10, 17, 28, .7)) drop-shadow(0 0 26px rgba(166, 181, 203, .3)); } html.naos .naos-about__sign { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; font: 600 12px/1.5 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-size-adjust: none; } html.naos .naos-about__sign::before, html.naos .naos-about__sign::after { content: ''; width: 32px; height: 13px; flex: none; background: var(--gold); -webkit-mask: var(--sprig) center / contain no-repeat; mask: var(--sprig) center / contain no-repeat; } html.naos .naos-about__sign::after { transform: scaleX(-1); } /* they rise into view (skin.js marks them); the medallions are struck like coins */ html.naos .naos-about [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); } html.naos .naos-about [data-rise].naos-seen { opacity: 1; transform: none; } html.naos .naos-ch .naos-ch__no { opacity: 0; transform: scale(.5); transition: opacity .5s ease .12s, transform .9s cubic-bezier(.34, 1.56, .64, 1) .12s; } html.naos .naos-ch.naos-seen .naos-ch__no { opacity: 1; transform: none; } @media (max-width: 979px) { html.naos .naos-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.naos .naos-stat:nth-child(3)::before { display: none; } html.naos .naos-stat:nth-child(-n+2) { padding-bottom: 20px; } html.naos .naos-stat:nth-child(n+3) { padding-top: 22px; } html.naos .naos-stat:nth-child(n+3)::after { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(199, 219, 228, .36), transparent); } } @media (max-width: 760px) { html.naos .naos-about { --no: 46px; } html.naos .naos-stat { gap: 8px; padding-left: 8px; padding-right: 8px; } html.naos .naos-stat small { letter-spacing: .1em; } html.naos .naos-stat__num { font-size: clamp(34px, 10.4vw, 46px); } html.naos .naos-stat__cap { font-size: 15.5px; } html.naos .naos-about__honours { justify-content: flex-start; flex-direction: column; gap: 10px; } html.naos .naos-about__honours li { font-size: 16px; align-items: flex-start; } html.naos .naos-about__honours svg { margin-top: 2px; } html.naos .naos-ch__text { font-size: 17px; } html.naos .naos-about__sign { letter-spacing: .13em; } html.naos .naos-about__sign::before, html.naos .naos-about__sign::after { display: none; } } /* ---------- ticker → a marble frieze between two meander bands ---------- */ html.naos .ticker { border: 0 !important; padding: 12px 0; background: var(--meander-ink) 0 3px / auto 10px repeat-x, var(--meander-ink) 0 calc(100% - 3px) / auto 10px repeat-x, linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .08)), var(--marble-tex) center / 900px auto !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 1px var(--gold), 0 18px 40px -18px rgba(0, 0, 0, .8); } html.naos .ticker__row { padding: 14px 0 !important; } html.naos .ticker__track span, html.naos .ticker__dai { font: 800 clamp(22px, 3vw, 40px)/1 var(--f-display) !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--on-marble) !important; -webkit-text-stroke: 0 !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .25); } html.naos .ticker__track span:nth-of-type(even) { color: #1a3d8f !important; } html.naos .ticker__dai { font-family: var(--f-deco) !important; font-weight: 900 !important; color: var(--gold-lo) !important; } html.naos .ticker__track svg { color: var(--gold-lo) !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); } /* ---------- portal: steles under a meander capital ---------- */ html.naos .pcard { border-radius: 0 !important; border: 0 !important; background: linear-gradient(180deg, rgba(8, 24, 66, .55), rgba(4, 11, 32, .92) 70%), var(--lapis-tex) center / 700px auto !important; box-shadow: inset 0 0 0 1px rgba(166, 181, 203, .35), inset 0 0 0 6px rgba(4, 11, 32, .5), inset 0 0 0 7px rgba(166, 181, 203, .12) !important; } html.naos .pcard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 3; pointer-events: none; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 2px no-repeat, var(--meander) 0 4px / auto 10px repeat-x; opacity: .85; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1); } html.naos .portal__grid.naos-seen .pcard::after { clip-path: inset(0 0 0 0); } html.naos .portal__grid > :nth-child(2)::after { transition-delay: .1s; } html.naos .portal__grid > :nth-child(3)::after { transition-delay: .2s; } html.naos .portal__grid > :nth-child(4)::after { transition-delay: .3s; } html.naos .portal__grid > :nth-child(5)::after { transition-delay: .4s; } html.naos .portal__grid > :nth-child(6)::after { transition-delay: .5s; } html.naos .portal__grid > :nth-child(7)::after { transition-delay: .6s; } html.naos .pcard:hover { box-shadow: inset 0 0 0 1px var(--gold-hi), inset 0 0 0 6px rgba(4, 11, 32, .5), inset 0 0 0 7px rgba(216, 224, 235, .3), 0 24px 60px -30px rgba(166, 181, 203, .5) !important; } html.naos .pcard__name { font-weight: 800 !important; font-size: clamp(26px, 2.4vw, 38px) !important; letter-spacing: .05em !important; text-transform: uppercase; color: var(--marble); } html.naos .pcard__desc { color: #b1bdd8 !important; } html.naos .pcard__go { color: var(--gold) !important; } html.naos .pcard__chip { border-radius: 3px !important; } /* the numbers become Greek numerals */ html.naos .pcard__no { font-size: 0 !important; } html.naos .pcard__no::after { font: 400 24px/1 'GFS Didot', var(--f-display); color: var(--gold); letter-spacing: .04em; } html.naos .portal__grid > :nth-child(1) .pcard__no::after { content: 'Α΄'; } html.naos .portal__grid > :nth-child(2) .pcard__no::after { content: 'Β΄'; } html.naos .portal__grid > :nth-child(3) .pcard__no::after { content: 'Γ΄'; } html.naos .portal__grid > :nth-child(4) .pcard__no::after { content: 'Δ΄'; } html.naos .portal__grid > :nth-child(5) .pcard__no::after { content: 'Ε΄'; } html.naos .portal__grid > :nth-child(6) .pcard__no::after { content: 'ϛ΄'; } html.naos .portal__grid > :nth-child(7) .pcard__no::after { content: 'Ζ΄'; } html.naos .portal__grid > :nth-child(8) .pcard__no::after { content: 'Η΄'; } /* ---------- motto: the crown over the inscription ---------- */ html.naos .dai { padding-block: clamp(80px, 11vw, 160px) !important; isolation: isolate; } html.naos .dai__glow { background: radial-gradient(40% 50% at 50% 55%, rgba(166, 181, 203, .22), transparent 70%) !important; } html.naos .dai::before { content: ''; position: absolute; left: 50%; top: 4%; width: min(460px, 76vw); height: 62%; transform: translateX(-50%); z-index: -1; pointer-events: none; background: url(img/crown.webp) 50% 0 / contain no-repeat; opacity: .42; filter: drop-shadow(0 0 40px rgba(61, 126, 255, .35)); -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); } html.naos .dai__q { font: 900 clamp(56px, 12vw, 200px)/1 var(--f-deco) !important; letter-spacing: .03em !important; filter: drop-shadow(0 4px 0 rgba(10, 17, 28, .7)) drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); } html.naos .dai__q * { background: inherit; -webkit-background-clip: text; background-clip: text; } html.naos .dai__drips { display: none !important; } html.naos .dai__by { color: var(--gold); } html.naos .dai__by .mono { font: 700 15px/1 var(--f-display) !important; letter-spacing: .2em; } html.naos .dai__by .muted { font-size: 20px !important; color: #c9d4e8 !important; } /* ---------- leaderboard: three pedestals ---------- */ html.naos .pod__block { border-radius: 0 !important; border: 0 !important; color: var(--on-marble) !important; font-family: var(--f-display) !important; font-weight: 800 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .1)), var(--marble-tex) center / 500px auto !important; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(0, 0, 0, .2) !important; clip-path: polygon(6% 0, 94% 0, 100% 10px, 100% 100%, 0 100%, 0 10px); transform-origin: 50% 100%; } html.naos .pod--1 .pod__block { background: var(--leaf-au) !important; background-attachment: fixed !important; color: var(--on-au) !important; } html.naos .pod--3 .pod__block { background: linear-gradient(118deg, #5a3a1a, #b07a44 35%, #e3b07a 50%, #9a6634 70%, #5a3a1a) !important; color: #1f1206 !important; } html.naos .podium.naos-seen .pod__block { animation: naosRise 1.2s cubic-bezier(.16, 1, .3, 1) both; } html.naos .podium.naos-seen .pod--1 .pod__block { animation-delay: .25s; } html.naos .podium.naos-seen .pod--3 .pod__block { animation-delay: .12s; } @keyframes naosRise { from { transform: scaleY(0); } to { transform: scaleY(1); } } html.naos .pod--1 .pod__av { box-shadow: 0 0 0 2px var(--nyx), 0 0 0 4px var(--au), 0 0 38px -4px var(--au) !important; } html.naos .board li { border-radius: 3px !important; } html.naos .board li.is-me { background: rgba(166, 181, 203, .1) !important; box-shadow: inset 0 0 0 1px rgba(166, 181, 203, .35) !important; } /* ---------- membership: three temple fronts ---------- */ html.naos .plus__glow { background: radial-gradient(50% 50% at 50% 30%, rgba(166, 181, 203, .16), transparent 70%) !important; } html.naos .plus { isolation: isolate; } html.naos .plus::before { content: ''; position: absolute; inset: 0 0 auto; height: min(100vh, 900px); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 11, 32, .35), var(--nyx) 92%), url(img/sanctum.webp) 50% 30% / cover no-repeat; opacity: .75; } html.naos .tier { padding: 64px 24px 26px !important; border-radius: 0 !important; overflow: visible; margin-top: 26px; } html.naos .tier::before { content: ''; position: absolute; left: -1px; right: -1px; top: -38px; height: 40px; pointer-events: none; background: linear-gradient(180deg, rgba(16, 48, 126, .9), rgba(8, 24, 66, .95)); clip-path: polygon(0 100%, 50% 0, 100% 100%); } html.naos .tier::after { content: ''; position: absolute; left: 50%; top: -34px; width: 64px; height: 64px; margin-left: -32px; pointer-events: none; background: url(img/crown.webp) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); } html.naos .tier:hover::after { transform: rotateY(360deg); } html.naos .tier__name { font-weight: 800 !important; font-size: 32px !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-align: center; } html.naos .tier__price { justify-content: center; } html.naos .tier__price b { font: 800 46px/1 var(--f-display) !important; letter-spacing: .01em !important; } html.naos .tier__mo { text-align: center; } html.naos .tier__perks svg { color: var(--gold) !important; } html.naos .tier__perks li { color: #c9d2e6 !important; } html.naos .tier--pop { transform: translateY(-14px); background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 30%), var(--marble-tex) center / 700px auto !important; border: 0 !important; box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 6px rgba(255, 255, 255, .5), inset 0 0 0 7px rgba(42, 72, 115, .45), 0 40px 90px -36px rgba(166, 181, 203, .55) !important; } html.naos .tier--pop::before { background: var(--leaf); background-attachment: fixed; } html.naos .tier--pop .tier__name { font-weight: 900 !important; background: var(--leaf-deep) !important; background-attachment: scroll !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); } html.naos .tier--pop .tier__price b, html.naos .tier--pop .tier__perks li { color: var(--on-marble) !important; } html.naos .tier--pop .tier__price .mono, html.naos .tier--pop .tier__mo { color: #4a5878 !important; } html.naos .tier--pop .tier__perks svg { color: var(--gold-lo) !important; } html.naos .tier--pop { padding-top: 84px !important; } html.naos .tier__pop { top: 34px !important; border-radius: 2px !important; background: var(--nyx) !important; color: var(--gold-hi) !important; border: 1px solid var(--gold); font: 700 11px/1 var(--f-display) !important; letter-spacing: .22em !important; text-transform: uppercase; z-index: 2; } /* the top tier ("Legende", the last of the two cards) is the one place membership turns real gold */ html.naos .plus__tiers > .tier:last-child:not(.tier--pop) { border-color: rgba(216, 182, 92, .6) !important; box-shadow: inset 0 0 0 5px rgba(4, 11, 32, .55), inset 0 0 0 6px rgba(212, 175, 55, .28), 0 0 0 1px rgba(212, 175, 55, .35), 0 30px 70px -34px rgba(212, 175, 55, .45) !important; } html.naos .plus__tiers > .tier:last-child:not(.tier--pop)::after { background-image: url(img/crown-gold.webp); } html.naos .plus__tiers > .tier:last-child:not(.tier--pop)::before { background: linear-gradient(180deg, rgba(74, 56, 16, .95), rgba(30, 22, 6, .95)); } html.naos .plus__tiers > .tier:last-child:not(.tier--pop) .tier__name { background: var(--leaf-au) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } html.naos .plus__tiers > .tier:last-child:not(.tier--pop) .tier__perks svg { color: var(--au) !important; } html.naos .plus__tiers > .tier:last-child:not(.tier--pop) .btn--fire { --stone: #e3cf98; color: #2c1d06 !important; } html.naos .plus__tiers.naos-seen .tier { animation: naosUp 1.1s cubic-bezier(.16, 1, .3, 1) both; } html.naos .plus__tiers.naos-seen .tier:nth-child(2) { animation-delay: .12s; } html.naos .plus__tiers.naos-seen .tier:nth-child(3) { animation-delay: .24s; } html.naos .plus__tiers.naos-seen .tier--pop { animation-name: naosUpPop; } @keyframes naosUp { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } } @keyframes naosUpPop { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(-14px); } } /* ---------- events, merch, best of ---------- */ html.naos .cal__grid > * { border-radius: 2px !important; } /* special events are gold leaf (master .is-ev); today is only ringed in gold, so the two never look alike */ html.naos .cal__grid .day-cell.is-today { background: rgba(4, 11, 32, .6) !important; color: var(--gold-hi) !important; font-weight: 800; border-color: transparent !important; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 12px rgba(166, 181, 203, .3), 0 0 14px -3px rgba(166, 181, 203, .6) !important; } html.naos .cal__grid .day-cell.is-today i { background: var(--gold-hi); } /* today with an event: the gold tile keeps its fill and gets a carved dark ring inside */ html.naos .cal__grid .day-cell.is-today.is-ev { background: var(--leaf-flat) !important; color: var(--on-gold) !important; box-shadow: inset 0 0 0 3px rgba(8, 14, 23, .8), inset 0 0 0 4px rgba(239, 242, 247, .55) !important; } html.naos .cal__grid .day-cell.is-today.is-ev i { background: var(--on-gold); } html.naos .cal__grid .day-cell.is-sel { box-shadow: 0 0 0 2px var(--nyx), 0 0 0 4px var(--gold-hi) !important; } html.naos .cal__grid .day-cell.is-today.is-ev.is-sel { box-shadow: inset 0 0 0 3px rgba(8, 14, 23, .8), 0 0 0 2px var(--nyx), 0 0 0 4px var(--gold-hi) !important; } html.naos .cal__month { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: .08em; } html.naos .ev time, html.naos .ev__date, html.naos .ev__day { font-family: var(--f-display) !important; } html.naos .prod { border-radius: 0 !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(166, 181, 203, .3) !important; background: radial-gradient(70% 55% at 50% 40%, rgba(16, 48, 126, .7), transparent 75%), linear-gradient(180deg, rgba(4, 11, 32, .6), rgba(4, 11, 32, .95)), var(--lapis-tex) center / 700px auto !important; } html.naos .prod:hover { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 30px 60px -30px rgba(166, 181, 203, .45) !important; } html.naos .vod { overflow: hidden; } /* next-page band */ html.naos .next-page { border-top: 0 !important; background: var(--meander) 0 0 / auto 10px repeat-x; } /* Cinzel runs wide: a size that keeps "TEAM JANNI+" on one line on desktop, and room for the arrow (its width + a gap larger than the 18 px hover shift) so the last letter never runs under it. Phones break the name into short lines anyway, so they keep the full width */ html.naos .next-page__name { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em !important; font-size: clamp(52px, 10vw, 160px) !important; } @media (min-width: 761px) { html.naos .next-page__name { padding-right: calc(clamp(48px, 7vw, 96px) + 28px); } } @media (max-width: 760px) { html.naos .next-page__go { top: clamp(60px, 9vw, 120px); bottom: auto !important; width: 40px !important; height: 40px !important; margin-top: -10px; } } html.naos .next-page__label { font-family: var(--f-display) !important; font-weight: 700; color: var(--gold) !important; letter-spacing: .2em !important; text-transform: uppercase; } /* ---------- footer: the temple steps ---------- */ html.naos .footer { background: linear-gradient(180deg, var(--nyx), rgba(4, 11, 32, 0) 30%), radial-gradient(70% 60% at 50% 100%, rgba(166, 181, 203, .14), transparent 70%), var(--nyx) !important; padding-top: 70px !important; } html.naos .footer::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 12px; background: var(--meander) 0 0 / auto 12px repeat-x; opacity: .6; } html.naos .footer__word { font-family: var(--f-deco) !important; font-weight: 900 !important; letter-spacing: .02em !important; } html.naos .footer__word span { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), var(--marble-tex) center / 700px auto !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; filter: drop-shadow(0 3px 0 rgba(2, 6, 20, .7)); } html.naos .footer__word:hover span { background: var(--leaf) !important; background-attachment: fixed !important; -webkit-background-clip: text !important; background-clip: text !important; } html.naos .footer__bar { border-top: 0 !important; position: relative; padding-top: 30px !important; color: #7f8db0 !important; } html.naos .footer__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .2)) 0 0 / 100% 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .25)) 0 6px / 100% 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3)) 0 12px / 100% 6px no-repeat, var(--marble-tex) center / 800px auto; opacity: .5; } html.naos .footer__legal a:hover, html.naos .footer__studio:hover { color: var(--gold-hi) !important; } /* ---------- forms, modals, toasts ---------- */ html.naos .field input, html.naos .field textarea, html.naos .field select, html.naos input[type="text"], html.naos input[type="email"], html.naos input[type="password"] { border-radius: 3px !important; } html.naos .modal__title { font-weight: 800 !important; letter-spacing: .04em !important; } /* modal eyebrows: both sprigs stay on the line (a long text breaks between them) and the line keeps clear of the close button, which reaches about 27 px into the box's content */ html.naos .modal .eyebrow { flex-wrap: nowrap; white-space: normal; line-height: 1.3 !important; text-align: center; } html.naos .modal__x ~ .eyebrow { padding-right: 38px !important; } @media (max-width: 520px) { html.naos .modal .eyebrow { letter-spacing: .15em !important; gap: 8px !important; } } /* checkboxes: a small dark slot with a gold rim, gold leaf with a carved tick when checked */ html.naos .modal input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; cursor: pointer; accent-color: var(--gold); border: 1px solid rgba(182, 194, 211, .75); border-radius: 2px; background: rgba(4, 11, 32, .8); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), 0 1px 0 rgba(230, 235, 242, .08); transition: border-color .2s, box-shadow .2s; } html.naos .modal input[type="checkbox"]:hover { border-color: var(--gold-hi); } html.naos .modal input[type="checkbox"]:checked { border-color: var(--gold-hi); background: url("data:image/svg+xml;utf8,") center / 15px 15px no-repeat, var(--leaf-flat); box-shadow: inset 0 1px 0 rgba(244, 246, 249, .6), 0 0 10px rgba(166, 181, 203, .45); } html.naos .modal input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-hi) !important; outline-offset: 2px; } html.naos .toast { border-radius: 4px !important; border-color: rgba(166, 181, 203, .35) !important; } /* ---------- the gold sheet: lapis tablets in a thin gold frame, limestone buttons (money stays real gold) ---------- */ html.naos .gold-sheet__have { border-radius: 3px !important; border-color: rgba(212, 175, 55, .45) !important; background: rgba(5, 15, 42, .74) !important; color: var(--au-hi) !important; font-family: var(--f-display) !important; letter-spacing: .06em; } html.naos .gold-pack { border-radius: var(--r) !important; border: 1px solid rgba(216, 182, 92, .32) !important; padding: 24px 10px 12px !important; background: radial-gradient(90% 55% at 50% 0%, rgba(216, 182, 92, .13), transparent 72%), linear-gradient(180deg, rgba(16, 30, 92, .82), rgba(7, 8, 32, .94)), var(--lapis-tex) center / 700px auto !important; box-shadow: inset 0 0 0 4px rgba(4, 11, 32, .55), inset 0 0 0 5px rgba(212, 175, 55, .12), 0 18px 36px -24px rgba(0, 0, 0, .9) !important; } html.naos .gold-pack:hover { border-color: var(--au-hi) !important; } html.naos .gold-pack.is-popular, html.naos .gold-pack.is-best { border-color: var(--au) !important; box-shadow: inset 0 0 0 4px rgba(4, 11, 32, .55), inset 0 0 0 5px rgba(246, 227, 163, .32), 0 0 0 1px rgba(212, 175, 55, .3), 0 20px 44px -22px rgba(212, 175, 55, .5) !important; } /* the "popular" / "best offer" plate: gold leaf, like the tags */ html.naos .gold-pack__tag, html.naos .gold-pack.is-best .gold-pack__tag { border-radius: 2px !important; background: var(--leaf-au-flat) !important; color: var(--on-au) !important; font: 700 10px/1.3 var(--f-display) !important; letter-spacing: .14em !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); } html.naos .gold-pack__n { color: var(--au-hi) !important; font-family: var(--f-display) !important; text-shadow: 0 2px 0 rgba(2, 6, 20, .6); } html.naos .gold-pack__c, html.naos .gold-pack__extra small { color: var(--au) !important; font-family: var(--f-display) !important; } html.naos .gold-pack__extra { color: #c9d2e6 !important; } /* bonus: a small limestone plate instead of the mint text (same height as the empty slot, so the rows stay level) */ html.naos .gold-pack__bonus:not(.is-none) { margin: 1px 0; padding: 4px 8px 3px; clip-path: var(--slab-sm); line-height: 11px !important; background: var(--stone-face), #d3c19f; color: #36250f !important; text-shadow: 0 1px 0 rgba(255, 248, 228, .6); box-shadow: var(--lime-bevel); font: 700 10.5px/11px var(--f-display) !important; letter-spacing: .06em; } /* the buy button: a limestone tablet */ html.naos .gold-pack__cta { border-radius: 0 !important; clip-path: var(--slab-sm); padding: 11px 6px 10px !important; background: var(--stone-face), #d3c19f !important; color: #36250f !important; text-shadow: 0 1px 0 rgba(255, 248, 228, .6); box-shadow: var(--lime-bevel); font: 700 11.5px/1.1 var(--f-display) !important; letter-spacing: .1em !important; transition: filter .3s; } html.naos .gold-pack:hover .gold-pack__cta { filter: brightness(1.07); } html.naos .gold-pack.is-soon .gold-pack__cta { background: var(--stone-face), #2c3550 !important; color: #b9a77c !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); box-shadow: var(--slate-bevel); } html.naos .gold-sheet__msg, html.naos .gold-sheet__plus { border-radius: 3px !important; } html.naos .gold-sheet__msg { background: rgba(5, 15, 42, .74) !important; border-color: rgba(212, 175, 55, .4) !important; color: var(--au-hi) !important; } html.naos .gold-sheet__plus { border-color: rgba(212, 175, 55, .32) !important; } html.naos .gold-sheet__plus b { color: var(--au-hi) !important; } html.naos .gold-sheet__demo { color: var(--au) !important; } /* without a membership the sheet offers it first (hub.js, CFG.plusRequired) */ html.naos .gold-sheet__lock { border-radius: 3px !important; background: rgba(5, 15, 42, .74) !important; border-color: rgba(212, 175, 55, .4) !important; } /* ---------- phones ---------- */ @media (max-width: 760px) { /* phone hero, sized by width: the whole 16:9 flight (nothing cut, nothing zoomed) right under the nav, claim and buttons straight below it; the hero is as tall as that, not a full screen with a gap */ html.naos .hero { min-height: 0 !important; } .naos-scene { inset: auto; left: 0; width: 100vw; height: 56.25vw; top: 84px; transform: none; } .naos-shade { inset: auto; left: 0; right: 0; top: 84px; height: 56.25vw; } .naos-logo { top: calc(84px + 36.5vw); width: 34vw; } /* under the JANNI_KIP of the frame, never over it */ .naos-dim { inset: auto; left: 0; right: 0; top: 0; height: calc(84px + 56.25vw); } .naos-veil { background: linear-gradient(180deg, rgba(7, 8, 32, .45) 0, rgba(7, 8, 32, 0) 120px, rgba(7, 8, 32, 0) calc(84px + 44vw), var(--nyx) calc(84px + 56.25vw)); } .naos-rays, .naos-flash { top: calc(84px + 10vw); } html.naos .hero__stage { padding: 84px 0 0 !important; height: calc(84px + 50vw); overflow: hidden; } html.naos .emblem { width: 46vw !important; margin-top: 0 !important; } html.naos .hero .drop-pill { display: none; } html.naos .dai-badge { right: -12% !important; top: -10% !important; } html.naos .hero__bottom { background: linear-gradient(0deg, var(--nyx) 30%, rgba(4, 11, 32, .85) 70%, rgba(4, 11, 32, 0)) !important; padding-top: 18px !important; } html.naos .hero__claim { font-size: clamp(25px, 7.6vw, 38px) !important; } html.naos .hero .btn { font-size: 14px !important; padding: 17px 17px; letter-spacing: .1em !important; } html.naos .nav::after { bottom: -7px; height: 6px; background-size: auto 6px; } html.naos .tier { margin-top: 40px; } html.naos .tier--pop, html.naos .plus__tiers.naos-seen .tier--pop { transform: none; animation-name: naosUp; } html.naos .dai::before { opacity: .38; } html.naos .title { font-size: clamp(32px, 9.4vw, 54px) !important; } html.naos .pcard__name { font-size: clamp(19px, 5.4vw, 26px) !important; letter-spacing: .02em !important; } /* on phones the hero copy holds the countdown: keep it readable instead of fading it out on scroll */ html.naos .hero__bottom { opacity: 1 !important; transform: none !important; } } /* ========================================================================== CINEMA — grading, grain, light and the motion layer ========================================================================== */ /* ---------- type details: inscriptions instead of a mono face, tabular figures where numbers tick ---------- */ html.naos .mono, html.naos .label, html.naos .chip, html.naos .online-pill, html.naos .status-pill, html.naos .tag, html.naos .countdown small, html.naos .match__date, html.naos .seg, html.naos .tile__head .mono { font-family: var(--f-display) !important; font-weight: 600 !important; letter-spacing: .1em !important; font-size-adjust: none; } html.naos .mono { text-transform: uppercase; } html.naos .countdown b, html.naos .drop__cd b, html.naos .match__date b, html.naos .ember-chip b, html.naos [data-online] { font-family: var(--f-num) !important; font-weight: 600 !important; font-variant-numeric: lining-nums tabular-nums !important; letter-spacing: 0 !important; } html.naos .countdown b { font-size: 30px !important; } html.naos .drop__cd b { font-size: 34px !important; color: var(--gold-hi) !important; } html.naos .lead { font-size: clamp(17px, 1.25vw, 20px) !important; line-height: 1.6 !important; } html.naos .pcard__desc, html.naos .tier__perks li, html.naos .msg__body, html.naos .ev p { line-height: 1.45; } html.naos .msg__nick, html.naos .board__nick, html.naos .pod__nick { font-family: var(--f-body) !important; font-weight: 700 !important; } html.naos .btn, html.naos .nav__links a, html.naos .eyebrow, html.naos .title, html.naos .hero__claim, html.naos .tier__name, html.naos .pcard__name, html.naos .tile__title, html.naos .quick-play, html.naos .lang__btn { font-size-adjust: none; } /* ---------- colour grade, light leaks, letterbox, lens streak (hero) ---------- */ /* the colour grade (violet-navy shadows, royal-blue mids, gold lights) is baked into img/temple-*.webp and the loops */ .naos-leak { position: absolute; inset: -25%; z-index: 2; pointer-events: none; opacity: .5; background: radial-gradient(26% 20% at 16% 30%, rgba(61, 126, 255, .32), transparent 70%), radial-gradient(22% 18% at 84% 64%, rgba(199, 210, 226, .24), transparent 70%), radial-gradient(14% 30% at 62% 12%, rgba(199, 219, 228, .14), transparent 70%); animation: naosLeak 19s ease-in-out infinite alternate; } @keyframes naosLeak { from { transform: translate3d(-5%, 3%, 0) rotate(-4deg); } to { transform: translate3d(6%, -3%, 0) rotate(5deg); } } .naos-bar { position: absolute; left: 0; right: 0; height: 11.5vh; z-index: 9; pointer-events: none; background: #000; transform: scaleY(0); } .naos-bar--t { top: 0; transform-origin: 50% 0; } .naos-bar--b { bottom: 0; transform-origin: 50% 100%; } .naos-streak { position: absolute; z-index: 6; left: 50%; top: 35%; width: 1px; height: 1px; pointer-events: none; } .naos-streak::before, .naos-streak::after { content: ''; position: absolute; left: -85vw; width: 170vw; top: -1px; height: 2px; opacity: 0; transform: scaleX(0); background: linear-gradient(90deg, transparent, rgba(91, 140, 255, 0) 8%, rgba(140, 180, 255, .9) 38%, #fff 50%, rgba(140, 180, 255, .9) 62%, rgba(91, 140, 255, 0) 92%, transparent); box-shadow: 0 0 16px 3px rgba(91, 140, 255, .6), 0 0 70px 16px rgba(61, 126, 255, .22); } .naos-streak::after { top: -40px; height: 80px; background: radial-gradient(50% 50% at 50% 50%, rgba(120, 165, 255, .35), transparent 70%); box-shadow: none; } .naos-streak.is-on::before { animation: naosStreak 1.7s cubic-bezier(.2, .7, .2, 1) both; } .naos-streak.is-on::after { animation: naosStreak 1.9s cubic-bezier(.2, .7, .2, 1) .05s both; } @keyframes naosStreak { 0% { opacity: 0; transform: scaleX(0); } 14% { opacity: 1; transform: scaleX(1); } 55% { opacity: .65; transform: scaleX(1.06); } 100% { opacity: 0; transform: scaleX(1.12); } } /* ---------- the colonnade: marble columns pass the camera while scrolling out of the hero ---------- */ .naos-pillar { position: absolute; z-index: 5; top: -12%; height: 130%; aspect-ratio: 420 / 1925; left: 50%; margin-left: calc(-130vh * 420 / 1925 / 2); pointer-events: none; opacity: 0; will-change: transform, opacity; background: url(img/column.webp) center / contain no-repeat; filter: brightness(.62) saturate(.85) drop-shadow(0 0 60px rgba(0, 0, 0, .65)); } /* ---------- whole page: film grain is the master's .grain; vignette and a torch that follows the pointer ---------- */ .naos-vignette { position: fixed; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 58%, rgba(3, 3, 18, .5) 100%); } .naos-torch { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(560px circle at calc(var(--gx) * 100%) calc(var(--gy) * 100%), rgba(232, 237, 243, .07), rgba(61, 126, 255, .035) 42%, transparent 70%); } html.naos.naos-fine .naos-torch { opacity: 1; } html.naos .aura i:nth-child(1) { background: radial-gradient(closest-side, rgba(40, 88, 183, .5), transparent) !important; } html.naos .aura i:nth-child(2) { background: radial-gradient(closest-side, rgba(199, 219, 228, .16), transparent) !important; } html.naos .aura i:nth-child(3) { background: radial-gradient(closest-side, rgba(182, 194, 211, .22), transparent) !important; } html.naos .aura b { background: radial-gradient(120% 100% at 50% 100%, rgba(61, 126, 255, .1), transparent 70%) !important; } html.naos .loader { box-shadow: inset 0 11.5vh 0 #000, inset 0 -11.5vh 0 #000; } /* ---------- titles are carved: each letter rises out of the stone and catches the light ---------- */ html.naos .title .word { perspective: 700px; } html.naos .title .char { transform-origin: 50% 85%; } html.naos .title.naos-seen .char { animation: naosCarve 1.25s cubic-bezier(.2, .75, .15, 1) calc(var(--i, 0) * 34ms + .08s) both !important; } html.naos .title.naos-seen .word.is-accent .char { animation-name: naosCarveGold !important; } @keyframes naosCarve { 0% { opacity: 0; transform: translateY(.42em) rotateX(-85deg); filter: blur(6px) brightness(2.2); } 45% { opacity: 1; transform: none; filter: drop-shadow(0 0 20px rgba(218, 225, 235, .85)) brightness(1.55); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .6)) drop-shadow(0 8px 14px rgba(2, 6, 20, .5)) brightness(1); } } @keyframes naosCarveGold { 0% { opacity: 0; transform: translateY(.42em) rotateX(-85deg); filter: blur(6px) brightness(2.2); } 45% { opacity: 1; transform: none; filter: drop-shadow(0 0 26px rgba(226, 232, 240, .95)) brightness(1.5); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 2px 0 rgba(10, 17, 28, .65)) drop-shadow(0 0 26px rgba(182, 194, 211, .3)) brightness(1); } } /* a meander line is drawn under each section title */ html.naos .section .title::after { content: ''; display: block; width: min(240px, 46%); height: 9px; margin: .42em 0 0; background: var(--meander) 0 0 / auto 9px repeat-x; opacity: .75; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1) .5s; } html.naos .section .title.naos-seen::after { clip-path: inset(0 0 0 0); } html.naos .plus__head .title::after, html.naos .section .title[style*="center"]::after { margin-inline: auto; } html.naos .eyebrow.naos-seen::before { animation: naosSprigL .9s cubic-bezier(.2, .8, .2, 1) .1s both; } html.naos .eyebrow.naos-seen::after { animation: naosSprigR .9s cubic-bezier(.2, .8, .2, 1) .1s both; } @keyframes naosSprigL { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes naosSprigR { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(-1); } } /* ---------- hero claim: tracks in like a film title, with a chromatic split ---------- */ html.naos .hero.naos-intro .hero__claim:not(.naos-claim-in) { opacity: 0 !important; } html.naos .hero__claim.naos-claim-in { animation: naosTrack 1.7s cubic-bezier(.16, 1, .3, 1) both; } html.naos .hero__claim.naos-claim-in em { animation: naosTrackGold 1.7s cubic-bezier(.16, 1, .3, 1) .28s both; } /* explicit end values: the claim must stay visible whatever opacity the page script left inline */ @keyframes naosTrack { 0% { letter-spacing: .5em; opacity: 0; filter: blur(14px) drop-shadow(-7px 0 0 rgba(61, 126, 255, .9)) drop-shadow(7px 0 0 rgba(255, 90, 70, .7)); } 55% { opacity: 1; filter: blur(0) drop-shadow(-2px 0 0 rgba(61, 126, 255, .5)) drop-shadow(2px 0 0 rgba(255, 90, 70, .35)); } 100% { letter-spacing: .03em; opacity: 1; filter: drop-shadow(0 2px 0 rgba(2, 6, 20, .7)) drop-shadow(0 16px 30px rgba(2, 6, 20, .75)); } } @keyframes naosTrackGold { 0% { letter-spacing: .5em; opacity: 0; filter: blur(14px) drop-shadow(-7px 0 0 rgba(61, 126, 255, .9)) drop-shadow(7px 0 0 rgba(255, 90, 70, .7)); } 55% { opacity: 1; filter: blur(0) drop-shadow(-2px 0 0 rgba(61, 126, 255, .5)) drop-shadow(2px 0 0 rgba(255, 90, 70, .35)); } 100% { letter-spacing: .03em; opacity: 1; filter: drop-shadow(0 2px 0 rgba(10, 17, 28, .65)); } } /* ---------- 3D cards with a reflection that follows the pointer ---------- */ html.naos .pcard, html.naos .prod { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; } html.naos .pcard:hover { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(218, 225, 235, .16), rgba(61, 126, 255, .06) 45%, transparent 65%), linear-gradient(180deg, rgba(16, 30, 92, .55), rgba(7, 8, 32, .92) 70%), var(--lapis-tex) center / 700px auto !important; } html.naos .prod:hover { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(218, 225, 235, .16), transparent 60%), radial-gradient(70% 55% at 50% 40%, rgba(40, 88, 183, .7), transparent 75%), linear-gradient(180deg, rgba(7, 8, 32, .6), rgba(7, 8, 32, .95)), var(--lapis-tex) center / 700px auto !important; } html.naos .tier { transition: translate .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; } html.naos .tier:hover { translate: 0 -8px; } html.naos .tier:not(.tier--pop):hover { box-shadow: inset 0 0 0 5px rgba(7, 8, 32, .55), inset 0 0 0 6px rgba(182, 194, 211, .2), 0 40px 80px -36px rgba(61, 126, 255, .55) !important; } /* ---------- countdown digits roll like a counter ---------- */ html.naos .countdown b.naos-tick, html.naos .drop__cd b.naos-tick { animation: naosTick .6s cubic-bezier(.2, .8, .2, 1); } /* starts mostly opaque: the digit changes every second, so a faint start would leave it pale most of the time */ @keyframes naosTick { from { transform: translateY(-30%); opacity: .6; color: #304c78; } } /* ---------- scroll-driven depth (browsers with view timelines; others simply show the end state) ---------- */ @supports (animation-timeline: view()) { html.naos .dai::before { animation: naosBust linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes naosBust { from { translate: -50% 90px; scale: .92; } to { translate: -50% -50px; scale: 1.02; } } html.naos .dai::before { transform: none; translate: -50% 0; } html.naos .plus::before { animation: naosSanctum linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes naosSanctum { from { translate: 0 -70px; } to { translate: 0 90px; } } html.naos .trailer__frame { animation: naosDolly linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes naosDolly { from { scale: .9; filter: brightness(.55) saturate(.8); } to { scale: 1; filter: none; } } html.naos .portal__grid > *, html.naos .merch__grid > *, html.naos .ev-list > * { animation: naosRiseIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } @keyframes naosRiseIn { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } } /* Über Janni: the silver thread grows with the reading, its end about the middle of the screen */ html.naos .naos-about__story::before { animation: naosThread linear both; animation-timeline: --naosStory; animation-range: cover 30vh cover calc(100% - 50vh); } @keyframes naosThread { from { transform: scaleY(0); } to { transform: scaleY(1); } } } /* eyebrows with a badge (hub): keep the word whole, let the badge wrap */ html.naos .eyebrow { flex-wrap: wrap; row-gap: 8px; white-space: nowrap; } html.naos .eyebrow .mono { font-size: 10px !important; letter-spacing: .06em !important; padding: 5px 8px; } html.naos .plus__head .title::after { width: 200px; max-width: 60%; } @media (max-width: 760px) { .naos-bar { height: 9vh; } .naos-vignette { background: radial-gradient(130% 100% at 50% 40%, transparent 62%, rgba(3, 3, 18, .45) 100%); } .naos-pillar { top: 0; height: 100svh; margin-left: calc(-100svh * 420 / 1925 / 2); } } /* desktop only: the WebGL fire draws dark smoke, so it needs screen blending to add only light (phones hide it) */ @media (hover: hover) and (pointer: fine) { html.naos .hero__fire { mix-blend-mode: screen; } } /* ---------- phones and tablets: a light version of the cinema layer ---------- Phones drop composited layers when there are too many (they flicker or vanish). So on touch devices: no fixed backgrounds (they repaint on every scroll frame and break text clipping in WebKit), no full-screen grain, vignette, light leaks, rays, colonnade or WebGL fire; the light on the gold does not move. */ @media (hover: none), (pointer: coarse) { html.naos *, html.naos *::before, html.naos *::after { background-attachment: scroll !important; } html.naos .grain, .naos-rays, .naos-leak, .naos-vignette, .naos-pillar, .naos-torch, html.naos .hero__fire { display: none !important; } html.naos .aura i, html.naos .aura b { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .naos-rays, .naos-glint::before, html.naos .dai-badge__core { animation: none !important; } .naos-scene video { display: none; } .naos-scene, .naos-front { transform: none; } html.naos .hero.naos-ready .hero__stage, html.naos .title.naos-seen .char { animation: none !important; } html.naos .emblem::after, html.naos .pcard::after { transition: none; } .naos-leak, .naos-streak::before, .naos-streak::after, html.naos .title.naos-seen .char, html.naos .hero__claim.naos-claim-in, html.naos .hero__claim.naos-claim-in em, html.naos .btn--fire:hover, html.naos .quick-play:hover, html.naos .countdown b.naos-tick, html.naos .eyebrow.naos-seen::before, html.naos .eyebrow.naos-seen::after { animation: none !important; } .naos-pillar, .naos-torch { display: none; } html.naos .dai::before, html.naos .plus::before, html.naos .trailer__frame, html.naos .portal__grid > *, html.naos .merch__grid > *, html.naos .ev-list > * { animation: none !important; } html.naos .pcard, html.naos .prod { transform: none; } html.naos .section .title::after { clip-path: none; transition: none; } html.naos .naos-about [data-rise], html.naos .naos-ch .naos-ch__no { opacity: 1 !important; transform: none !important; transition: none !important; } html.naos .naos-about__stats::before { clip-path: none; transition: none; } html.naos .naos-about__story::before { animation: none !important; transform: none !important; } /* the emblem simply stands there for a moment */ .naos-logo .naos-logo__float, .naos-logo__glow { animation: none !important; } .naos-logo__burst { display: none; } } /* ========================================================================== SILVER PASS — small type, avatars, merch art (the logo is silver: the page follows) ========================================================================== */ /* no inscription under 12 px: meta lines, dates, chips, prices, footer */ html.naos :is(.footer__bar span, .footer__legal a, .vod__badges span, .item__kind, .cal__dow span, .wd__d, .wd__l, .chapter b, .prod__left, .ev__date span, .ev__type, .msg__time, .countdown small, .pod__xp, .clip__meta span, .prod__badge, .chip span, .match__game, .pcard__chip span, .mode-tag, .status-pill, .tag, .phone__hint, .drop__tag, .tier__pop, .tier__excl small, .lang__btn) { font-size: 12px !important; } /* longer small lines read better in the book face than in capitals */ html.naos :is(.item__kind, .wd__l, .prod__left, .msg__time, .phone__hint, .footer__bar span) { font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: .01em !important; font-size: 14px !important; } /* avatars without a picture: the master's purple, green and pink give way to the logo's blues, silver and marble */ html.naos .av:has(use[href="#g-crown"]) { --a: #5b8cff !important; --b: #dce8ff !important; } html.naos .av:has(use[href="#g-pad"]) { --a: #10246e !important; --b: #3d7eff !important; } html.naos .av:has(use[href="#g-bolt"]) { --a: #2858b7 !important; --b: #bcd4ff !important; } html.naos .av:has(use[href="#g-ghost"]) { --a: #1b2240 !important; --b: #7c92ac !important; } html.naos .av:has(use[href="#g-headset"]) { --a: #34507f !important; --b: #a9c4ff !important; } html.naos .av:has(use[href="#g-star"]) { --a: #9fb4cc !important; --b: #f4f7fb !important; } /* the "toxic" nick in Aegean teal instead of acid green */ html.naos .nick--toxic { background: linear-gradient(100deg, #8ff3e6, #2fc1d6 50%, #c9fbff) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* merch drawings: lettering in the inscription face and silver, sticker sheet without the old flame, navy and royal blue */ html.naos .part text { font-family: var(--f-display) !important; font-weight: 700; letter-spacing: .06em; font-size-adjust: none; } html.naos .part text[fill="#a57c23"] { fill: #dbe6f0; } html.naos .part text[font-size="24"] { font-size: 19px; } html.naos .part text[font-size="34"] { font-size: 30px; } html.naos .part rect[fill="#131208"] { fill: #0b1d4d; } html.naos .part circle[fill="#8a651c"] { fill: #2858b7; } html.naos .part rect[stroke="#8a651c"] { stroke: #c7dbe4; } html.naos .part g[transform="rotate(-6 92 250)"] { display: none; }