/* The homepage in the dark: the approved light page's counterpart, nothing else changes. * * Loaded on the homepage only (public/index.html), after home.css. The head script there sets * data-theme from the device's prefers-color-scheme, or from ?theme=dark / ?theme=light for review; * every other page keeps data-theme="light" and never loads this file, so no dark token reaches it. * * The palette is the cream page turned to espresso ink. Ratios are WCAG contrast: * ground #1A1613 the page, header and footer * paper #241F1A cards, the verify band, inputs (cream text 14.1:1) * raised #2E2822 hovers and the brand chips * band #0F0C0A Brands on board, the one band darker than the ground * text #F6EFE4 cream (15.7:1 on the ground); soft #CBBFB0 (9.9:1); muted #B3A696 (6.8:1 on paper) * links #FF8A5C the orange lifted for text (7.7:1 on the ground, 7.0:1 on paper) * orange #FF6B35 unchanged: the poster and the partner button keep their ink text (6.5:1) * controls #8C7F71 input and pill edges (4.2:1 on paper) * Category tones, each a deep shade of its light pastel (cream text 9.5:1 and up), and a light * shade for its line doodle and its underline (7:1 and up on the ground): * fashion #263A55 / #8DB8F0 food #1F4038 / #74D1B0 getting around #4D2A36 / #F294B6 * study #31401F / #AED17A sports #5E4209 / #EDBB52 sand #42311F / #E3A672 * Shadows barely read on dark, so depth is a step in surface, with a hairline where a shadow was. * Objects keep their real colours: photos, the phone, the 3D stills, partner logos (on white, as * in the light), the student pass, the die-cut stickers, the QR sticker and the store badges. */ /* ---------- the header's theme button, homepage only ---------- An outline circle like the menu button: the moon in the light (go dark), the sun in the dark (go light). Desktop: just left of Sign in. Phone: just left of the menu, after Get verified. */ .ls-home .nav-theme { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ls-ink); border-radius: 50%; color: var(--ls-ink); background: transparent; cursor: pointer; transition: background-color 160ms var(--ls-ease); } .ls-home .nav-theme svg { display: block; } .ls-home .nav-theme:hover { background: rgba(20, 20, 18, .05); } :root:not([data-theme="dark"]) .ls-home .nav-theme-sun, :root[data-theme="dark"] .ls-home .nav-theme-moon { display: none; } :root[data-theme="dark"] .ls-home .nav-theme:hover { background: rgba(246, 239, 228, .08); } @media (max-width: 600px) { .ls-home .nav-theme { order: 1; } .ls-home .nav-right .ls-menu { order: 2; } } /* At 360 the logo, Get verified, the button and the menu share one line: a little tighter there, nothing wraps. */ @media (max-width: 380px) { .ls-home .nav-logo { width: 100px; } .ls-home .nav-right { gap: 6px; } .ls-home .nav-right .btn-sm { padding-inline: 12px; } } /* The switch crossfades in 200ms (home.js, through a view transition); nothing moves under reduced motion. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease; } @media (prefers-reduced-motion: reduce) { .ls-home .nav-theme { transition: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------- the doodle swap: both drawings ship, the one for this theme shows ---------- */ :root:not([data-theme="dark"]) .ls-home img.hm-art-dark { display: none; } :root[data-theme="dark"] .ls-home img.hm-art-light { display: none; } /* ---------- tokens ---------- */ :root[data-theme="dark"] { color-scheme: dark; --edge-top-background: #1A1613; --edge-bottom-background: #1A1613; --home-edge-ground: #1A1613; --home-edge-ink: #0F0C0A; --site-accent-text: #FF8A5C; --site-control-border: #8C7F71; /* The shared tokens the header, the footer and the logo tiles read. */ --tud-color-bg-canvas: #1A1613; --tud-color-bg-surface: #241F1A; --tud-color-bg-raised: #2E2822; --tud-color-bg-sunken: #15120F; --tud-color-bg-inverse: #F6EFE4; --tud-color-text-primary: #F6EFE4; --tud-color-text-secondary: #CBBFB0; --tud-color-text-muted: #B3A696; --tud-color-text-placeholder: #A39787; --tud-color-text-inverse: #1A1613; --tud-color-accent-tint: #33231A; --tud-color-accent-tint-border: #5A3420; --tud-color-border-default: #352E27; --tud-color-border-strong: #443B32; --tud-color-border-focus: #FF8A5C; --tud-color-deal-panel-0: #5E4209; --tud-color-deal-panel-1: #42311F; --tud-color-deal-panel-2: #1F4038; --tud-color-deal-panel-3: #4D2A36; --tud-color-deal-panel-4: #31401F; --tud-color-deal-panel-5: #263A55; --tud-color-deal-panel-6: #3A2F52; } :root[data-theme="dark"] body.ls-home { --ls-ink: #F6EFE4; --ls-ink-2: #E6DDD0; --ls-soft: #CBBFB0; --ls-muted: #B3A696; --ls-canvas: #1A1613; --ls-paper: #241F1A; --ls-raised: #2E2822; --ls-band: #0F0C0A; --ls-line: #352E27; --ls-line-2: #443B32; --ls-control: #8C7F71; --ls-orange-deep: #FF7A47; --ls-accent-text: #FF8A5C; --ls-tint: #33231A; --ls-tint-line: #5A3420; --ls-chai: #5E4209; --ls-sand: #42311F; --ls-food: #1F4038; --ls-move: #4D2A36; --ls-study: #31401F; --ls-fashion: #263A55; --ls-lilac: #3A2F52; --ls-ok-bg: #12281A; --ls-wait-bg: #2A2010; --ls-shadow: 0 0 0 1px #443B32; --ls-lift: var(--tud-shadow-card); --site-accent-text: var(--ls-accent-text); } /* Light islands: things that are objects on the page, not the page, keep their light tokens. */ :root[data-theme="dark"] .ls-home :is(.ls-poster, .ls-pass, .ls-stk, .ls-app-qr) { --ls-ink: #141412; --ls-ink-2: #2B2722; --ls-soft: #55504A; --ls-paper: #FFFFFF; --ls-line-2: #E2D6CA; --ls-chai: #FFE6A8; --ls-sand: #F7E1C8; --ls-food: #C9E4DC; --ls-move: #F9D8DE; --ls-study: #DCE8C0; --ls-fashion: #D3E2F2; --ls-lilac: #E6DDF5; --ls-shadow: 1px 2px 4px rgba(22, 21, 18, .16); --tud-color-bg-surface: #FFFFFF; color: #141412; } :root[data-theme="dark"] .ls-home .ls-poster .ls-btn--ink:hover { background: #33302B; border-color: #33302B; } /* The poster's picture panel and its logo badge stay on white, the frame the photo was cut into. */ :root[data-theme="dark"] .ls-home .hh-poster-badge, :root[data-theme="dark"] .ls-home .hh-poster-logo { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .28); } /* Partner logos sit on white, as in the light, so a transparent logo never sinks into the dark. On a card, a logo drawn on black keeps an edge in the card's own border colour (drawn above the logo's edge), so the card's outline reads as one colour all the way round. The logo itself is never recoloured. */ :root[data-theme="dark"] .ls-home .tud-logo:has(> img) { --tud-color-bg-surface: #FFFFFF; } :root[data-theme="dark"] .ls-home .tud-logo:has(> img)::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ls-line-2); pointer-events: none; } :root[data-theme="dark"] .ls-home :is(.ls-poster, .ls-stk, .hm-brand) .tud-logo:has(> img)::after { content: none; } /* A logo that fills its stub: the card's own border continues round the stub (its scalloped side carries none). */ :root[data-theme="dark"] .ls-home .hm-row-stub--fill .tud-logo:has(> img)::after { content: none; } :root[data-theme="dark"] .ls-home .hm-row-stub--fill { box-shadow: inset 1px 0 0 var(--ls-line-2), inset 0 1px 0 var(--ls-line-2), inset 0 -1px 0 var(--ls-line-2); border-radius: 18px 0 0 18px; } :root[data-theme="dark"] .ls-home .tud-logo:not(:has(> img)) { color: #F6EFE4; } /* ---------- base ---------- */ :root[data-theme="dark"] .ls-home .theme-art img { mix-blend-mode: normal; } :root[data-theme="dark"] .ls-home .ls-input::placeholder { color: #A39787; } :root[data-theme="dark"] .ls-home ::selection { color: #141412; background: #FF8A5C; } /* The ink pill turns cream from the tokens, its words in the paper (14.1:1); only the hovers are fixed colours. */ :root[data-theme="dark"] .ls-home :is(.ls-btn--ink, .btn-primary):hover { background: #E2D8CA; border-color: #E2D8CA; } :root[data-theme="dark"] .ls-home :is(.ls-btn--line, .btn-secondary):hover { background: rgba(246, 239, 228, .08); } /* ---------- header and footer ---------- */ :root[data-theme="dark"] .ls-home .site-header { background: rgba(26, 22, 19, .92); border-bottom-color: #2E2822; } :root[data-theme="dark"] .ls-home .nav-logo, :root[data-theme="dark"] .ls-home .footer-landmark-image { object-position: -99999px 0; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; } /* The brand's own dark lockup: the same mark, its "The" and "Uni" in white. */ :root[data-theme="dark"] .ls-home .nav-logo { background-image: url('/assets/logo/theunideals-logo-color-dark.svg'); } :root[data-theme="dark"] .ls-home .nav-pass-dot { box-shadow: 0 0 0 2px #1A1613; } /* The landmark drawn again for the dark (footer-svg/README.md): cream letters and lines, the orange kept. */ :root[data-theme="dark"] .ls-home .footer-landmark-image { filter: none; background-image: url('/assets/footer-svg/footer-landmark-1080-dark.webp'); } @media (min-width: 760px) { :root[data-theme="dark"] .ls-home .footer-landmark-image { background-image: url('/assets/footer-svg/footer-landmark-dark.svg'); } } :root[data-theme="dark"] .ls-home .footer-company a { color: #CBBFB0; } /* ---------- hero ---------- */ :root[data-theme="dark"] .ls-home .hh-card-link { box-shadow: var(--tud-shadow-card); } :root[data-theme="dark"] .ls-home .hh-card-link:focus-visible { outline-color: #F6EFE4; } :root[data-theme="dark"] .ls-home .ls-signup, :root[data-theme="dark"] .ls-home .ls-account { box-shadow: inset 0 0 0 1px #443B32; } /* The phone hero's stage (home.css, under 900px): a step up from the ground, on the paper tone. */ :root[data-theme="dark"] .ls-home .hh { --hh-stage: #241F1A; } /* ---------- cards and tickets ---------- */ /* The logo badge is cut from the card body, as in the light, on a lifted surface so a logo drawn on black still separates. */ :root[data-theme="dark"] .ls-home :is(.hh-deal-badge, .hh-logo-badge) { background: #40352C; } :root[data-theme="dark"] .ls-home .hm-featured .hh-deal:hover, :root[data-theme="dark"] .ls-home :is(.hm-featured--card-b, .hm-featured--card-c, .hm-featured--card-d) .hh-deal:hover { box-shadow: inset 0 0 0 1.5px #5A4F43; } :root[data-theme="dark"] .ls-home .hh-media-logo .tud-logo, :root[data-theme="dark"] .ls-home .hm-row-stub .tud-logo { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .1); } /* The ticket's hover line is a lighter shade of its tone on the dark, where the light page darkens it. */ :root[data-theme="dark"] .ls-home .hm-row { --row-line: color-mix(in srgb, var(--ls-tone, var(--ls-sand)) 55%, #F6EFE4); } :root[data-theme="dark"] .ls-home .hm-row::before { --line: var(--stub-line, color-mix(in srgb, var(--ls-tone, var(--ls-sand)) 55%, #F6EFE4)); } :root[data-theme="dark"] .ls-home .hm-row:hover .hm-row-foil-act { color: #1A1613; background: #F6EFE4; border-color: #F6EFE4; } /* ---------- categories ---------- */ :root[data-theme="dark"] .ls-home .ls-tile--sand { --hm-under: #E3A672; } :root[data-theme="dark"] .ls-home .ls-tile--fashion { --hm-under: #8DB8F0; } :root[data-theme="dark"] .ls-home .ls-tile--food { --hm-under: #74D1B0; } :root[data-theme="dark"] .ls-home .ls-tile--chai { --hm-under: #EDBB52; } :root[data-theme="dark"] .ls-home .ls-tile--move { --hm-under: #F294B6; } :root[data-theme="dark"] .ls-home .ls-tile--study { --hm-under: #AED17A; } :root[data-theme="dark"] .ls-home .ls-tile--lilac { --hm-under: #B9A3F0; } /* The washes are mixed toward the ground, so a deep tone still reads as its own colour. */ @media (hover: hover) { :root[data-theme="dark"] .ls-home .hm-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--ls-tile, var(--ls-sand)) 55%, #1A1613); } } :root[data-theme="dark"] .ls-home .hm-tab:not([aria-selected="true"]):focus-visible { background: color-mix(in srgb, var(--ls-tile, var(--ls-sand)) 55%, #1A1613); } :root[data-theme="dark"] .ls-home .hm-tab[aria-selected="true"] { background: var(--ls-tile, var(--ls-sand)); } /* ---------- Brands on board: the band below the ground ---------- */ :root[data-theme="dark"] .ls-home .hm-brands { color: #F6EFE4; background: var(--ls-band); } :root[data-theme="dark"] .ls-home .hm-brands::before { background: radial-gradient(circle at 50% 100%, var(--ls-band) 5.5px, #0000 6px) 0 0 / 24px 100% round; } :root[data-theme="dark"] .ls-home .hm-brands-head h2 { color: #F6EFE4; } :root[data-theme="dark"] .ls-home .hm-pause--ink { color: #F6EFE4; border-color: rgba(246, 239, 228, .42); } :root[data-theme="dark"] .ls-home .hm-pause--ink:hover { border-color: #F6EFE4; } :root[data-theme="dark"] .ls-home :is(.hm-pause--ink, .hm-brand, .hm-brands-link):focus-visible { outline-color: #F6EFE4; } :root[data-theme="dark"] .ls-home .hm-brand { background: var(--ls-raised); } :root[data-theme="dark"] .ls-home .hm-brands .hm-fade--l { background: linear-gradient(90deg, var(--ls-band), rgba(15, 12, 10, 0)); } :root[data-theme="dark"] .ls-home .hm-brands .hm-fade--r { background: linear-gradient(270deg, var(--ls-band), rgba(15, 12, 10, 0)); } :root[data-theme="dark"] .ls-home .hm-brands-link, :root[data-theme="dark"] .ls-home .hm-brands-link:hover { color: #141412; } /* ---------- shops: the edge fades go to the dark ground ---------- */ :root[data-theme="dark"] .ls-home .ls-shops .hm-fade--l { background: linear-gradient(90deg, #1A1613, rgba(26, 22, 19, 0)); } :root[data-theme="dark"] .ls-home .ls-shops .hm-fade--r { background: linear-gradient(270deg, #1A1613, rgba(26, 22, 19, 0)); } :root[data-theme="dark"] .ls-home .ls-shops :is(.ls-product-name, .ls-product-price) { color: #F6EFE4; } :root[data-theme="dark"] .ls-home .ls-shops .ls-product-photo { box-shadow: inset 0 0 0 1px #352E27; } /* ---------- the app ---------- */ :root[data-theme="dark"] .ls-home .ls-app-mark { color: #141412; } /* The store badges as the stores draw them for dark grounds: black, with the stores' grey keyline. */ :root[data-theme="dark"] .ls-home .ls-store { color: #FFFFFF; background: #000000; box-shadow: inset 0 0 0 1px #A6A6A6; } :root[data-theme="dark"] .ls-home .ls-app-phone::before { box-shadow: 0 18px 26px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .ls-home .ls-app-still::after { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .24) 42%, rgba(0, 0, 0, 0) 70%); } :root[data-theme="dark"] .ls-home :is(.ls-stk-link, .ls-app-qr) { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 24px -12px rgba(0, 0, 0, .7); } /* ---------- the ambassador band ---------- */ @media (hover: hover) { :root[data-theme="dark"] .ls-home .hm-am-btn:hover { background: #E2D8CA; } }