/* ==========================================================================
Layout clone — measurements extracted 1:1 from the reference homepage
stylesheet. All values here are real measured values, not approximations.
Branding (logo, photography, copy, fonts) is placeholder-only and lives in
index.html + assets/ so it can be swapped wholesale.
========================================================================== */
/* --------------------------------------------------------------------------
1. Font fallback with metric overrides
The reference site ships a proprietary face and falls back to Arial with
these exact metric overrides. Replicating the overrides keeps line boxes
the same height, which is what makes vertical rhythm match.
-------------------------------------------------------------------------- */
@font-face {
font-family: CloneSans;
font-weight: 400;
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
ascent-override: 110.5%;
descent-override: 29.29%;
line-gap-override: 19.4%;
size-adjust: 99%;
font-display: optional;
}
@font-face {
font-family: CloneSans;
font-weight: 500;
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
ascent-override: 110.5%;
descent-override: 29.29%;
line-gap-override: 19.4%;
size-adjust: 99%;
font-display: optional;
}
@font-face {
font-family: CloneSans;
font-weight: 600;
src: local("Arial Bold"), local("Arial"), local("Liberation Sans Bold");
ascent-override: 110.5%;
descent-override: 29.29%;
line-gap-override: 19.4%;
size-adjust: 99%;
font-display: optional;
}
@font-face {
font-family: CloneSans;
font-weight: 700;
src: local("Arial Bold"), local("Arial"), local("Liberation Sans Bold");
ascent-override: 110.5%;
descent-override: 29.29%;
line-gap-override: 19.4%;
size-adjust: 99%;
font-display: optional;
}
/* --------------------------------------------------------------------------
2. Design tokens (measured values)
-------------------------------------------------------------------------- */
:root {
/* typography
--font-family-display headings, quotes, the big moments
--font-family-default body, buttons, nav, everything else
Pairings are defined in section 4b and switched via [data-font] on . */
--font-family-default: CloneSans, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-family-display: var(--font-family-default);
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-size-base: 16px;
--line-height-base: 1.5;
/* ---- TUNAS brand palette (from reference-docs/DESIGN_DIRECTION.md) ----
One main accent: deep aquatic teal. Coral is reserved for the logo and
rare brand moments. Gold is commerce/unlock only and is unused here.
Never stack coral + teal + gold in one view. */
--tunas-teal: #0f8f86;
--tunas-teal-pressed: #0a726b;
--tunas-teal-soft: #e6f6f4;
--tunas-aqua: #d9f2ef;
--tunas-coral: #e66c5d;
--tunas-gold: #b98718;
--tunas-ink: #11181f;
--tunas-ink-soft: #31404c;
--tunas-muted: #74808b;
--tunas-paper: #fffcfa;
--tunas-surface: #f7f2ed;
--tunas-black: #050506;
/* The night-mode pair. Type on a dark field is this rather than pure white:
the page is cream everywhere else and #fff against it reads cold and
borrowed. The field is one value shared by every dark section, because
the posts fade INTO it and a near-miss shows as a seam. */
--tunas-cream: #eee7e0;
--tunas-night: #0a0c0e;
/* ---- brand mapped onto the layout roles ---- */
--color-text-default: var(--tunas-ink);
--color-text-subdued: var(--tunas-muted);
--color-text-inverse: var(--tunas-paper);
--color-link-default: var(--tunas-ink);
--color-white: var(--tunas-paper);
--color-accent: var(--tunas-teal);
--color-accent-light: var(--tunas-teal-soft);
--color-hero-field: var(--tunas-aqua);
--color-bg-primary: var(--tunas-paper);
--color-bg-secondary: var(--tunas-surface);
--color-bg-tertiary: var(--tunas-paper);
--color-bg-tertiary-transparent: rgba(255, 252, 250, 0.8);
--color-border-supportive: rgba(17, 24, 31, 0.1);
--color-border-selected: var(--tunas-ink);
/* geometry */
--content-max-width: 1440px;
--content-max-inner-width: 1360px;
--margins-horizontal: 20px;
--margins-vertical: 20px;
--gap-large: 12px;
--gap-medium: 8px;
--radius-level-0: 24px;
--radius-level-1: 16px;
--radius-full: 1000px;
/* elevation */
--shadow-none: 0 0 0 0 #ffffff00;
--shadow-in-line: 0 1px 8px 0 #2020201f;
--shadow-overlay: 0 1px 24px 0 #20202033;
/* header */
--header-padding-top: 26px;
--header-padding-horizontal: 20px;
--header-menu-gap: 24px;
/* Reference mark was 4.75:1 at 125px. The TUNAS mark is 748x355 (2.11:1),
so it is set narrower to keep the same optical height in the header. */
--logo-width: 96px;
--logo-aspect: 748 / 355;
--header-z-index: 100;
--over-content-z-index: 10;
--control-height-medium: 48px;
/* buttons */
--btn-bg-primary-default: var(--tunas-ink);
--btn-fg-primary-default: var(--tunas-paper);
--btn-bg-primary-inverse: var(--tunas-paper);
--btn-fg-primary-inverse: var(--tunas-ink);
--btn-overlay-hover-on-dark: #ffffff0d;
--btn-overlay-pressed-on-dark: #ffffff1a;
--btn-overlay-hover-on-light: #1414140d;
--btn-overlay-pressed-on-light: #1414141a;
--btn-border-secondary: var(--tunas-ink);
}
/* --------------------------------------------------------------------------
3. Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
--screen-height: 100vh;
font-size: 100%;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: var(--color-text-default);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
font-family: var(--font-family-default);
}
@supports (height: 100dvh) {
html {
--screen-height: 100dvh;
}
}
body {
overflow-x: hidden;
overflow-y: auto;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-default);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text-default);
background: var(--color-white);
}
img,
svg {
display: block;
}
ul,
ol {
list-style: none;
}
button {
display: block;
overflow: visible;
max-width: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: inherit;
font: inherit;
-webkit-appearance: none;
appearance: none;
}
/* --------------------------------------------------------------------------
4. Typography scale
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
4b. Font pairings
Each block sets a display face (headings) and a body face. Switch by
changing data-font on . Once one is chosen, keep only that block,
trim the Google Fonts URL in index.html, and delete the .fontbar rules.
-------------------------------------------------------------------------- */
/* Bricolage Grotesque + Plus Jakarta Sans — the most "drawn for us" option.
Bricolage has real quirk: tight apertures, slightly irregular widths, a
variable width axis. Reads as a commissioned face rather than a picked one. */
:root[data-font="bricolage"] {
--font-family-display: "Bricolage Grotesque", var(--font-family-default);
--font-family-default: "Plus Jakarta Sans", -apple-system, "Segoe UI", Arial,
sans-serif;
}
/* Gabarito + Figtree — closest to the logo's own geometry. Round, bold,
confident, friendly. The safest "looks like a real consumer brand" pick. */
:root[data-font="gabarito"] {
--font-family-display: Gabarito, var(--font-family-default);
--font-family-default: Figtree, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Fraunces + Manrope — pushes toward beauty editorial. Fraunces is variable
with SOFT and WONK axes, so the display face can be tuned from restrained
to strange. Strong if TUNAS leans Cosmos/magazine rather than app. */
:root[data-font="fraunces"] {
--font-family-display: Fraunces, Georgia, serif;
--font-family-default: Manrope, -apple-system, "Segoe UI", Arial, sans-serif;
}
:root[data-font="fraunces"] .header-2,
:root[data-font="fraunces"] .header-3,
:root[data-font="fraunces"] .quote,
:root[data-font="fraunces"] .quote-block__text {
font-variation-settings: "SOFT" 40, "WONK" 1;
letter-spacing: -0.01em;
}
/* Familjen Grotesk — one family for everything. Scandinavian, slightly
condensed, characterful without shouting. Simplest system to maintain. */
:root[data-font="familjen"] {
--font-family-display: "Familjen Grotesk", var(--font-family-default);
--font-family-default: "Familjen Grotesk", -apple-system, "Segoe UI", Arial,
sans-serif;
}
.header-2,
.header-3,
.p-1,
.p-3,
.action-large,
.action-small,
.quote {
color: var(--text-color, var(--color-text-default));
font-family: var(--font-family-default);
margin: 0;
padding: 0;
}
/* Headings, quotes and the hero numerals take the display face. */
.header-2,
.header-3,
.quote,
.quote-block__text,
.stacked-card__badge {
font-family: var(--font-family-display);
}
.header-2 {
--font-size: 34px;
--line-height: 1;
--letter-spacing: 0.4px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.header-3 {
--font-size: 28px;
--line-height: 34px;
--letter-spacing: 0.36px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.p-1 {
--font-size: 17px;
--line-height: 22px;
--letter-spacing: 0.28px;
font-weight: var(--font-weight-regular);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.p-3 {
--font-size: 13px;
--line-height: 18px;
--letter-spacing: 0.32px;
font-weight: var(--font-weight-regular);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.action-large {
--font-size: 17px;
--line-height: 22px;
--letter-spacing: 0.28px;
font-weight: var(--font-weight-medium);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.action-small {
--font-size: 13px;
--line-height: 18px;
--letter-spacing: 0.32px;
font-weight: var(--font-weight-medium);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
.quote {
--font-size: 22px;
--line-height: 26px;
--letter-spacing: 0.079px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
}
@media (min-width: 600px) {
.header-2 {
--font-size: 49px;
--line-height: 55px;
--letter-spacing: 0.42px;
}
.header-3 {
--font-size: 34px;
--line-height: 38px;
--letter-spacing: 0.36px;
}
.p-1 {
--font-size: 20px;
--line-height: 25px;
--letter-spacing: 0.32px;
}
.p-3 {
--font-size: 15px;
--line-height: 20px;
--letter-spacing: 0.3px;
}
.action-large {
--font-size: 20px;
--line-height: 25px;
--letter-spacing: 0.32px;
}
.action-small {
--font-size: 15px;
--line-height: 20px;
--letter-spacing: 0.3px;
}
.quote {
--font-size: 28px;
--line-height: 32px;
--letter-spacing: 0.101px;
}
}
@media (min-width: 1024px) {
.header-2 {
--font-size: 68px;
--line-height: 70px;
--letter-spacing: 0.46px;
}
.header-3 {
--font-size: 34px;
--line-height: 1;
--letter-spacing: 0.4px;
}
.quote {
--font-size: 49px;
--line-height: 55px;
--letter-spacing: 0.42px;
}
}
.color-default {
color: var(--color-text-default);
}
.color-inverse {
color: var(--color-text-inverse);
}
.is-subdued {
color: var(--color-text-subdued);
}
.a11y-visually-hidden {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
clip-path: inset(100%);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
5. Icon + logo primitives
-------------------------------------------------------------------------- */
.icon {
position: relative;
display: block;
width: 24px;
height: 24px;
fill: currentColor;
-webkit-font-smoothing: antialiased;
}
.icon svg {
fill: currentColor;
width: 100%;
height: 100%;
pointer-events: none;
}
.icon--stretch {
width: inherit;
height: inherit;
}
.logo {
display: block;
width: 100%;
color: var(--logo-color, #020202);
}
.logo--black {
--logo-color: #3b3b3b;
}
.logo__image {
display: block;
width: 100%;
height: auto;
}
.logo__image svg,
.logo__image img {
width: 100%;
}
/* --------------------------------------------------------------------------
6. Buttons
-------------------------------------------------------------------------- */
.button {
position: relative;
display: flex;
align-items: stretch;
overflow: hidden;
min-width: var(--button-min-width);
min-height: var(--button-min-height);
max-height: var(--button-min-height);
margin: 0;
padding: var(--button-padding-vertical) var(--button-padding-horizontal);
border: var(--button-border-width, 0) var(--button-border-style, solid)
var(--button-border-color, transparent);
border-radius: var(--button-border-radius);
background-color: var(--button-background-color, transparent);
text-align: center;
color: var(--button-color);
text-decoration: none;
transition: opacity 0.2s ease;
cursor: pointer;
user-select: none;
-webkit-font-smoothing: antialiased;
}
.button::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: inherit;
}
.button:hover::before,
.button:focus-visible::before {
background-color: var(--button-overlay-background-hover);
}
.button:active::before {
background-color: var(--button-overlay-background-pressed);
}
.button[disabled] {
pointer-events: none;
opacity: 0.5;
}
@media (min-width: 640px) {
.button {
--button-min-width: 150px;
}
}
.button__content {
display: flex;
justify-content: center;
align-items: center;
color: var(--button-content-color);
pointer-events: none;
flex: 1 1 auto;
gap: 0 var(--gap-medium);
}
.button__text {
--font-size: 15px;
--line-height: 20px;
--letter-spacing: 0.3px;
display: block;
max-width: 100%;
flex: 0 1 auto;
min-width: 0;
font-weight: var(--font-weight-medium);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
font-family: var(--font-family-default);
}
@media (min-width: 600px) {
.button__text {
--font-size: 17px;
--line-height: 22px;
--letter-spacing: 0.28px;
}
}
.button__icon {
display: block;
width: var(--button-icon-size);
height: var(--button-icon-size);
}
.button__icon + .button__text {
margin-left: var(--button-gap);
}
.button--size-medium {
--button-gap: 8px;
--button-padding-vertical: 14px;
--button-padding-horizontal: 24px;
--button-border-radius: 16px;
--button-min-height: 50px;
--button-icon-size: 20px;
}
.button--size-small {
--button-gap: 8px;
--button-padding-vertical: 12px;
--button-padding-horizontal: 20px;
--button-border-radius: 12px;
--button-min-height: 44px;
--button-icon-size: 18px;
}
.button--color-default.button--primary {
--button-background-color: var(--btn-bg-primary-default);
--button-color: var(--btn-fg-primary-default);
--button-border-color: #2020201f;
--button-border-width: 0px;
--button-overlay-background-hover: var(--btn-overlay-hover-on-dark);
--button-overlay-background-pressed: var(--btn-overlay-pressed-on-dark);
}
.button--color-inverse.button--primary {
--button-background-color: var(--btn-bg-primary-inverse);
--button-color: var(--btn-fg-primary-inverse);
--button-border-color: #2020201f;
--button-border-width: 0px;
--button-overlay-background-hover: var(--btn-overlay-hover-on-light);
--button-overlay-background-pressed: var(--btn-overlay-pressed-on-light);
}
.button--header.button--primary {
--button-background-color: hsla(0, 0%, 100%, 0.8);
--button-color: var(--color-text-default);
--button-border-color: var(--color-border-supportive);
--button-border-width: 1px;
--button-overlay-background-hover: var(--color-white);
--button-overlay-background-pressed: var(--color-white);
--button-icon-size: 24px;
backdrop-filter: blur(16.8881931305px);
-webkit-backdrop-filter: blur(16.8881931305px);
max-height: 50px;
min-height: 44px;
}
@media (max-width: 640px) {
.button--header.button--primary {
height: 44px;
}
}
.button--inline {
max-width: 100%;
min-width: max-content;
width: max-content;
}
/* --------------------------------------------------------------------------
7. Skip link
-------------------------------------------------------------------------- */
.skip-link {
position: fixed;
transition: position 0.2s;
left: 20px;
top: -100px;
z-index: calc(var(--header-z-index) + 1);
}
.skip-link:focus-within {
top: 20px;
}
/* --------------------------------------------------------------------------
8. Header
-------------------------------------------------------------------------- */
.header-container {
position: fixed;
top: 0;
width: 100%;
min-height: 100px;
z-index: 2;
background: none;
}
.header-container.is-open::after {
content: "";
position: fixed;
inset: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 0;
}
.header-container__nav {
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.header-container__modal {
position: absolute;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: max-content;
max-width: var(--content-max-width);
top: 90px;
bottom: 0;
left: 50%;
padding: 0 var(--header-padding-horizontal);
margin: 0 auto;
transform: translate(-50%);
z-index: 1;
}
@media (min-width: 1024px) {
.header-container__modal {
top: 100px;
}
}
.header {
padding-top: var(--header-padding-top);
transition: top 0.3s;
}
.header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.8;
background: linear-gradient(
0deg,
hsla(0, 0%, 85%, 0),
hsla(0, 0%, 45%, 0.18) 115%
);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--header-padding-horizontal);
margin: 0 auto;
max-width: var(--content-max-width);
}
.header__logo {
display: flex;
flex-shrink: 0;
align-self: center;
max-width: var(--logo-width);
}
.header__logo-link {
display: inline-block;
vertical-align: top;
text-decoration: none;
aspect-ratio: var(--logo-aspect);
}
.header__menu {
display: flex;
flex-grow: 1;
justify-content: center;
}
.header__actions {
display: flex;
flex-shrink: 0;
gap: 8px;
align-items: center;
}
.header__logo + .header__actions,
.header__menu + .header__actions {
margin-left: auto;
}
/* header visibility helpers */
@media (max-width: 1199px) {
.header .desktop-only {
display: none;
}
}
@media (min-width: 1200px) {
.header .not-desktop {
display: none;
}
}
@media (min-width: 641px) {
.header .mobile-only {
display: none;
}
}
@media (max-width: 640px) {
.header .not-mobile {
display: none;
}
}
.header-menu {
display: flex;
align-items: center;
border-radius: var(--radius-level-1);
border: 1px solid var(--color-border-supportive);
background: var(--color-bg-tertiary-transparent);
backdrop-filter: blur(16.8881931305px);
-webkit-backdrop-filter: blur(16.8881931305px);
justify-content: end;
gap: var(--header-menu-gap);
}
.header-menu__item {
display: flex;
align-items: center;
position: relative;
}
.header-menu__link {
padding: 14px 22px;
border: 1px solid transparent;
text-decoration: none;
color: var(--color-link-default);
background: none;
display: flex;
align-items: center;
font-size: 17px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
.header-menu__link:hover,
.header-menu__link.is-active {
border-radius: var(--radius-level-1);
border: 1px solid var(--color-border-supportive);
background: var(--color-bg-primary);
}
/* --------------------------------------------------------------------------
9. Dropdown (language selector)
-------------------------------------------------------------------------- */
.dropdown {
--dropdown-min-height: var(--control-height-medium);
--dropdown-label-color: var(--color-text-subdued);
--dropdown-label-color-hover: #202020;
--dropdown-border-radius: 16px;
--dropdown-background: var(--color-bg-tertiary-transparent);
--dropdown-padding-horizontal: 24px;
--dropdown-padding-vertical: 12px;
--dropdown-gap: 8px;
--dropdown-icon-start-size: 22px;
--dropdown-icon-flip-size: 24px;
--dropdown-icon-start-color: #202020;
--dropdown-icon-flip-color: #202020;
--dropdown-border-color: var(--btn-border-secondary);
--dropdown-border-width: 1px;
--dropdown-dropdown-gap: 6px;
--dropdown-dropdown-padding-horizontal: 12px;
--dropdown-dropdown-padding-bottom: 12px;
--dropdown-dropdown-padding-top: 10px;
display: block;
color: var(--dropdown-label-color);
min-width: fit-content;
max-width: 100%;
position: relative;
min-height: var(--dropdown-min-height);
}
.dropdown__label {
position: relative;
background: var(--dropdown-background);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: var(--dropdown-padding-vertical) var(--dropdown-padding-horizontal);
cursor: pointer;
border: var(--dropdown-border-width) solid var(--dropdown-border-color);
border-radius: var(--dropdown-border-radius);
gap: var(--dropdown-gap);
min-height: var(--dropdown-min-height);
backdrop-filter: blur(16.8881931305px);
-webkit-backdrop-filter: blur(16.8881931305px);
}
.dropdown--header-style .dropdown__label {
border: var(--dropdown-border-width) solid var(--color-border-supportive);
}
.dropdown__label:hover,
.dropdown__label:active {
--dropdown-background: var(--color-bg-primary);
}
.dropdown__icon-start {
display: flex;
flex: 0 0 auto;
width: var(--dropdown-icon-start-size);
height: var(--dropdown-icon-start-size);
color: var(--dropdown-icon-start-color);
}
.dropdown__icon-flip {
display: flex;
flex: 0 0 auto;
width: var(--dropdown-icon-flip-size);
height: var(--dropdown-icon-flip-size);
color: var(--dropdown-icon-flip-color);
}
.dropdown.is-opened .dropdown__icon-flip {
transform: scale(-1);
}
.dropdown__menu {
display: none;
position: absolute;
z-index: var(--over-content-z-index);
background: var(--dropdown-background);
border: var(--dropdown-border-width) solid var(--dropdown-border-color);
left: 0;
right: 0;
overflow: hidden;
min-width: max-content;
}
.dropdown.is-opened .dropdown__menu {
display: block;
}
.dropdown.is-opened:not(.dropdown--direction-top) .dropdown__label {
border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
border-bottom-color: transparent;
}
.dropdown.is-opened:not(.dropdown--direction-top) .dropdown__menu {
border-top: 0;
border-radius: 0 var(--dropdown-border-radius) var(--dropdown-border-radius)
var(--dropdown-border-radius);
}
.dropdown--direction-top .dropdown__menu {
bottom: 100%;
border-bottom: none;
border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius)
var(--dropdown-border-radius) 0;
}
.dropdown.is-opened.dropdown--direction-top .dropdown__label {
border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
border-top-color: transparent;
}
.dropdown__list {
display: flex;
flex-direction: column;
align-items: center;
list-style: none;
box-sizing: border-box;
margin: 0 0 var(--dropdown-dropdown-padding-bottom) 0;
padding-top: var(--dropdown-dropdown-padding-top);
padding-left: var(--dropdown-dropdown-padding-horizontal);
padding-right: var(--dropdown-dropdown-padding-horizontal);
overflow-y: scroll;
max-height: inherit;
scrollbar-width: thin;
text-align: center;
}
.dropdown__menu--has-max-height .dropdown__list {
max-height: calc(400px + var(--dropdown-dropdown-padding-top));
}
.dropdown__item + .dropdown__item {
margin-top: var(--dropdown-dropdown-gap);
}
.dropdown__link {
width: 100%;
display: block;
padding-left: 0;
padding-right: 0;
color: var(--dropdown-label-color);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
}
.dropdown__link:hover p {
color: var(--dropdown-label-color-hover);
}
/* --------------------------------------------------------------------------
10. QR + app download widget
-------------------------------------------------------------------------- */
.qr-code {
--qr-code-size: 158px;
--qr-code-padding: 12px;
flex-shrink: 0;
height: var(--qr-code-size);
width: var(--qr-code-size);
padding: var(--qr-code-padding);
border-radius: 9px;
box-sizing: border-box;
background: var(--color-bg-primary);
}
.qr-code svg,
.qr-code img {
display: block;
width: 100%;
height: 100%;
}
.qr-code--small {
--qr-code-size: 107px;
--qr-code-padding: 8px;
}
.qr-code--large {
--qr-code-size: 218px;
--qr-code-padding: 14px;
}
.app-download-widget {
display: flex;
align-items: center;
align-content: center;
gap: 15px;
width: 338px;
padding: var(--gap-large);
border-radius: var(--radius-level-1);
border: 1.48px solid var(--color-border-supportive);
background: var(--tunas-teal-soft);
box-shadow: var(--shadow-in-line);
}
.app-download-widget--floating {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.header-container__app-download-widget {
position: fixed;
display: none;
right: 0;
bottom: 28px;
z-index: 1;
transform: translate(100%);
transition: transform 0.2s ease-in-out;
}
@media (min-width: 1024px) {
.header-container__app-download-widget {
display: block;
}
}
/* Reference keys the widget's slide-in off `.is-open` (the menu-open state),
which also draws the full-viewport blur scrim above. Split into its own
state so revealing the widget on scroll doesn't blur the page. */
.header-container.is-open .header-container__app-download-widget,
.header-container.is-widget-visible .header-container__app-download-widget {
transform: translate(0);
}
/* --------------------------------------------------------------------------
11. Main
-------------------------------------------------------------------------- */
.main {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 768px) {
.main {
gap: 20px;
}
}
@media (min-width: 1024px) {
.main {
gap: 40px;
}
}
/* --------------------------------------------------------------------------
12. Hero (logo variant)
-------------------------------------------------------------------------- */
.hero {
display: flex;
}
.hero--logo {
position: relative;
flex-direction: column;
justify-content: flex-end;
padding: 24px 16px;
background: var(--color-hero-field);
height: auto;
gap: 18px;
}
@media (min-width: 768px) {
.hero--logo {
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 26px;
}
}
@media (min-width: 1024px) {
.hero--logo {
height: 811px;
padding: 40px;
justify-content: center;
}
}
.hero__animation {
display: flex;
width: 100%;
height: 381px;
padding: 0 10%;
transform-origin: top left;
transform: scale(0.564);
justify-content: center;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.hero__animation {
transform: scale(0.742);
width: 600px;
height: 502px;
padding: 0;
flex-direction: column;
flex-shrink: 1;
}
}
@media (min-width: 1024px) {
.hero__animation {
position: absolute;
width: 560px;
height: 676px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.hero__logo {
display: flex;
width: 100%;
max-width: var(--content-max-inner-width);
}
@media (min-width: 768px) {
.hero__logo {
padding: 0 24px 34px;
}
}
@media (min-width: 1024px) {
.hero__logo {
padding: 0;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
}
/* The reference filled the full 1360px content width with its 4.75:1 mark
(=283px tall). Capping the 2.11:1 TUNAS mark at 620px gives it comparable
optical mass instead of a 638px-tall wordmark. */
.hero__logo .logo {
max-width: 300px;
margin: 0 auto;
}
@media (min-width: 768px) {
.hero__logo .logo {
max-width: 460px;
}
}
@media (min-width: 1024px) {
.hero__logo .logo {
max-width: 620px;
}
}
/* hero card stack animation */
.animation-cards {
position: relative;
width: 100%;
height: 100%;
will-change: contents;
transform: translateZ(0);
}
.animation-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: absolute;
width: 330px;
height: 676px;
opacity: 0;
animation-timing-function: ease-out;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.animation-card__img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.animation-card__text {
height: 124px;
z-index: 1;
text-align: center;
transform: rotateX(30deg) rotateY(25deg);
}
.animation-card:nth-child(1) {
z-index: 6;
}
.animation-card:nth-child(2) {
z-index: 5;
}
.animation-card:nth-child(3) {
z-index: 4;
}
.animation-card:nth-child(4) {
z-index: 3;
}
.animation-card:nth-child(5) {
z-index: 2;
}
.animation-card:nth-child(6) {
z-index: 1;
}
@keyframes card-slide-in {
0% {
opacity: 0;
translate: 0 -40px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
@keyframes card-slide-out {
0% {
opacity: 1;
translate: 0 0;
}
100% {
opacity: 0;
translate: 0 40px;
}
}
@keyframes swap-card-1 {
0% {
opacity: 1;
transform: scale(1) translate(0);
}
100% {
opacity: 0;
transform: scale(1.1) translate(-100px);
}
}
@keyframes swap-card-2 {
0% {
transform: scale(0.75) translate(250px);
}
100% {
transform: scale(1) translate(0);
}
}
@keyframes swap-card-3 {
0% {
transform: scale(0.5) translate(680px);
}
100% {
transform: scale(0.75) translate(250px);
}
}
@keyframes swap-card-4 {
0% {
opacity: 0;
transform: scale(0.4) translate(900px);
}
100% {
opacity: 1;
transform: scale(0.5) translate(680px);
}
}
.animation-cards--in .animation-card:nth-child(1) {
animation: card-slide-in 0.25s 1 forwards, swap-card-1 0.4s 1 forwards;
animation-timing-function: ease-out, ease-in-out;
animation-delay: 1s, 2.5s;
}
.animation-cards--in .animation-card:nth-child(2) {
transform: scale(0.75) translate(250px);
animation: card-slide-in 0.25s 1 forwards, swap-card-2 0.4s 1 forwards,
swap-card-1 0.4s 1 forwards;
animation-timing-function: ease-out, ease-in-out, ease-in-out;
animation-delay: 1.15s, 2.5s, 3.8s;
}
.animation-cards--in .animation-card:nth-child(3) {
transform: scale(0.5) translate(680px);
animation: card-slide-in 0.25s 1 forwards, swap-card-3 0.4s 1 forwards,
swap-card-2 0.4s 1 forwards, swap-card-1 0.4s 1 forwards;
animation-timing-function: ease-out, ease-in-out, ease-in-out, ease-in-out;
animation-delay: 1.3s, 2.5s, 3.8s, 5.2s;
}
.animation-cards--in .animation-card:nth-child(4) {
transform: scale(0.4) translate(900px);
animation: swap-card-4 0.4s 1 forwards, swap-card-3 0.4s 1 forwards,
swap-card-2 0.4s 1 forwards;
animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
animation-delay: 2.5s, 3.8s, 5.2s;
}
.animation-cards--in .animation-card:nth-child(5) {
transform: scale(0.4) translate(900px);
animation: swap-card-4 0.4s 1 forwards, swap-card-3 0.4s 1 forwards;
animation-timing-function: ease-in-out, ease-in-out;
animation-delay: 3.8s, 5.2s;
}
.animation-cards--in .animation-card:nth-child(6) {
transform: scale(0.4) translate(900px);
animation: swap-card-4 0.4s 1 forwards;
animation-timing-function: ease-in-out;
animation-delay: 5.2s;
}
.animation-cards--out .animation-card:nth-child(4) {
opacity: 1;
transform: scale(1) translate(0);
animation: card-slide-out 0.25s 1 forwards;
animation-timing-function: ease-out;
animation-delay: 0.2s;
}
.animation-cards--out .animation-card:nth-child(5) {
opacity: 1;
transform: scale(0.75) translate(250px);
animation: card-slide-out 0.25s 1 forwards;
animation-timing-function: ease-out;
animation-delay: 0.35s;
}
.animation-cards--out .animation-card:nth-child(6) {
opacity: 1;
transform: scale(0.5) translate(680px);
animation: card-slide-out 0.25s 1 forwards;
animation-timing-function: ease-out;
animation-delay: 0.5s;
}
/* --------------------------------------------------------------------------
13. CTA box (shared copy block)
-------------------------------------------------------------------------- */
.cta-box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
}
@media (min-width: 768px) {
.cta-box {
gap: 34px;
}
}
.cta-box__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
@media (min-width: 768px) {
.cta-box__copy {
gap: 16px;
}
}
.cta-box--stacked-cards .cta-box__copy {
gap: 16px;
}
@media (min-width: 768px) {
.cta-box--stacked-cards .cta-box__copy {
gap: 20px;
}
}
/* --------------------------------------------------------------------------
14. Stacked cards carousel section
-------------------------------------------------------------------------- */
.carousel-stacked-cards {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: var(--color-white);
}
.carousel-stacked-cards__inner {
position: relative;
display: flex;
flex-direction: column;
padding: 32px var(--margins-horizontal);
max-width: var(--content-max-width);
align-items: flex-start;
gap: 24px;
}
@media (min-width: 768px) {
.carousel-stacked-cards__inner {
flex-direction: row;
padding: 0 75px;
margin-bottom: 0;
justify-content: center;
align-items: center;
gap: 20px;
}
}
@media (min-width: 1024px) {
.carousel-stacked-cards__inner {
display: grid;
grid-template-columns: 1fr 1fr;
height: max-content;
padding: 0 40px;
}
}
.carousel-stacked-cards__copy {
display: flex;
flex-direction: column;
gap: 24px;
order: 1;
}
@media (min-width: 768px) {
.carousel-stacked-cards__copy {
justify-content: center;
align-items: flex-start;
gap: 34px;
flex: 1 0 0;
align-self: stretch;
order: 0;
}
}
@media (min-width: 1024px) {
.carousel-stacked-cards__copy {
padding-left: 60px;
}
}
.carousel-stacked-cards__cards {
display: flex;
width: 100%;
max-width: 400px;
height: 276px;
margin: 0 auto;
}
@media (min-width: 768px) {
.carousel-stacked-cards__cards {
height: 450px;
width: auto;
max-width: unset;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 0;
}
}
@media (min-width: 1024px) {
.carousel-stacked-cards__cards {
margin: 0 40px;
width: 540px;
height: 618px;
align-items: center;
flex-shrink: 0;
}
}
.carousel-stacked-cards__cards-inner {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
z-index: 0;
}
@media (min-width: 768px) {
.carousel-stacked-cards__cards-inner {
height: 320px;
flex-shrink: 0;
}
}
@media (min-width: 1024px) {
.carousel-stacked-cards__cards-inner {
width: 588px;
height: 460px;
}
}
.stacked-card {
position: absolute;
width: 221px;
height: 276px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
z-index: 3;
}
.stacked-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stacked-card:nth-child(2) {
right: calc((100% - 221px) / 2);
z-index: 2;
transform: scale(0.85);
transform-origin: right center;
}
.stacked-card:nth-child(3) {
right: 0;
z-index: 1;
transform: scale(0.7);
transform-origin: right center;
}
@media (min-width: 768px) {
.stacked-card {
width: 256px;
height: 320px;
border-radius: 14px;
}
.stacked-card:nth-child(2) {
right: calc((100% - 256px) / 2);
}
}
@media (min-width: 1024px) {
.stacked-card {
width: 368px;
height: 461px;
border-radius: var(--radius-level-1);
}
.stacked-card:nth-child(2) {
right: calc((100% - 368px) / 2);
}
}
.stacked-card__badge {
--badge-font-size: 24px;
position: absolute;
top: 8px;
right: 8px;
padding: 12px 6px;
align-items: center;
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--tunas-paper);
text-align: center;
font-size: var(--badge-font-size);
font-style: normal;
font-weight: 400;
line-height: var(--badge-font-size);
writing-mode: vertical-lr;
}
@media (min-width: 768px) {
.stacked-card__badge {
--badge-font-size: 28px;
padding: 14px 7px;
}
}
@media (min-width: 1024px) {
.stacked-card__badge {
--badge-font-size: 40px;
padding: 20px 10px;
}
}
.stacked-card:nth-child(2) .stacked-card__badge {
font-size: calc(var(--badge-font-size) * 0.85);
line-height: calc(var(--badge-font-size) * 0.85);
}
.stacked-card:nth-child(3) .stacked-card__badge {
font-size: calc(var(--badge-font-size) * 0.6);
line-height: calc(var(--badge-font-size) * 0.6);
}
/* --------------------------------------------------------------------------
15. CTA image box section
-------------------------------------------------------------------------- */
.cta-image-box-wrapper {
padding: 0 20px;
margin: 0 auto;
width: 100%;
max-width: var(--content-max-width);
}
@media (min-width: 1024px) {
.cta-image-box-wrapper {
padding: 0 40px;
}
}
.cta-image-box {
display: flex;
padding: var(--margins-vertical) var(--margins-horizontal);
max-width: var(--content-max-inner-width);
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
border-radius: var(--radius-level-0);
border: 1px solid var(--color-border-supportive);
background: var(--color-bg-secondary);
box-shadow: var(--shadow-in-line);
}
@media (min-width: 768px) {
.cta-image-box {
flex-direction: row;
align-items: center;
gap: unset;
}
}
@media (min-width: 1024px) {
.cta-image-box {
padding: 40px;
}
}
.cta-content {
display: flex;
padding: var(--margins-vertical) 0;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
}
.cta-image-box--image-start .cta-content {
order: 1;
}
@media (max-width: 767px) {
.cta-image-box--image-start .cta-content {
padding: 0;
}
}
@media (min-width: 768px) {
.cta-content {
padding: 40px var(--margins-horizontal);
justify-content: center;
gap: 34px;
flex: 1 0 0;
align-self: stretch;
}
}
@media (min-width: 1024px) {
.cta-content {
padding: 0 40px;
}
}
.cta-image {
position: relative;
aspect-ratio: 313 / 280;
min-height: 280px;
width: 100%;
align-self: stretch;
border-radius: var(--radius-level-1);
overflow: hidden;
}
.cta-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-image-box--image-start .cta-image {
order: 0;
}
@media (min-width: 768px) {
.cta-image {
aspect-ratio: 377 / 410;
height: 410px;
width: unset;
flex: 1 0 0;
}
}
@media (min-width: 1024px) {
.cta-image {
aspect-ratio: 660 / 618;
height: 618px;
}
}
.cta-image__overlay {
position: absolute;
inset: 0;
}
/* --------------------------------------------------------------------------
16. Cards grid (2-up)
-------------------------------------------------------------------------- */
.cards {
max-width: var(--content-max-width);
margin: 0 auto;
}
.cards--2-up {
padding: 0 16px;
}
@media (min-width: 768px) {
.cards--2-up {
padding: 0 20px;
}
}
@media (min-width: 1024px) {
.cards--2-up {
padding: 0 40px;
}
}
.cards--2-up .cards__grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
@media (min-width: 768px) {
.cards--2-up .cards__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
.cards--2-up .cards__grid {
gap: 40px;
}
}
.card {
display: flex;
max-width: 420px;
padding: var(--margins-vertical) var(--margins-horizontal);
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 16px;
overflow: hidden;
border-radius: var(--radius-level-0);
background: var(--tunas-surface);
box-shadow: var(--shadow-none);
border: 1px solid transparent;
}
.card:hover {
border: 1px solid var(--color-border-supportive);
box-shadow: var(--shadow-overlay);
}
@media (min-width: 768px) {
.card {
min-width: 361px;
gap: 24px;
}
}
@media (min-width: 1024px) {
.card {
max-width: 660px;
height: auto;
border: 1px solid var(--color-border-supportive);
}
}
.card--bg-tint {
background: var(--color-accent-light);
}
.card--2-up {
justify-content: space-between;
height: 100%;
max-width: unset;
}
.card__image {
position: relative;
flex-shrink: 1;
flex-grow: 1;
align-self: stretch;
border-radius: var(--radius-level-1);
background: var(--color-bg-tertiary);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
.card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card--2-up .card__image {
aspect-ratio: 366 / 216;
flex-grow: 0;
}
@media (min-width: 768px) {
.card--2-up .card__image {
aspect-ratio: 400 / 234;
}
}
@media (min-width: 1024px) {
.card--2-up .card__image {
aspect-ratio: 620 / 330;
border-radius: var(--radius-level-0);
}
}
.card__copy {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.card--2-up .card__copy {
flex-grow: 1;
justify-content: space-between;
}
.card__title-description {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 16px;
}
.card__link {
display: flex;
min-height: 50px;
justify-content: center;
align-items: center;
color: var(--color-text-default);
font-weight: 400;
font-size: 17px;
font-family: var(--font-family-default);
}
/* --------------------------------------------------------------------------
16b. TUNAS five — the acronym row (new component)
Horizontal scroll-snap below 1024, five-up grid above. Follows the same
spacing/radius tokens as the measured components.
-------------------------------------------------------------------------- */
.five {
max-width: var(--content-max-width);
margin: 0 auto;
width: 100%;
}
.five__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 0 16px 24px;
}
@media (min-width: 768px) {
.five__head {
gap: 16px;
padding: 0 20px 32px;
}
}
@media (min-width: 1024px) {
.five__head {
padding: 0 40px 40px;
max-width: 820px;
}
}
.five__row {
display: flex;
flex-direction: row;
gap: 12px;
padding: 0 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: 16px;
scrollbar-width: none;
}
.five__row::-webkit-scrollbar {
display: none;
}
@media (min-width: 768px) {
.five__row {
gap: 16px;
padding: 0 20px;
scroll-padding-inline-start: 20px;
}
}
@media (min-width: 1024px) {
.five__row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding: 0 40px;
overflow: visible;
}
}
.five__item {
position: relative;
flex: 0 0 auto;
width: 156px;
aspect-ratio: 2 / 3;
border-radius: var(--radius-level-1);
overflow: hidden;
scroll-snap-align: start;
background: var(--tunas-surface);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
@media (min-width: 768px) {
.five__item {
width: 208px;
}
}
@media (min-width: 1024px) {
.five__item {
width: auto;
border-radius: var(--radius-level-0);
}
}
.five__item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.five__item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(17, 24, 31, 0.72) 0%, rgba(17, 24, 31, 0) 55%);
}
.five__label {
position: relative;
z-index: 1;
padding: 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.five__letter {
font-weight: var(--font-weight-bold);
font-size: 34px;
line-height: 1;
color: var(--tunas-aqua);
}
@media (min-width: 1024px) {
.five__letter {
font-size: 44px;
}
}
.five__word {
font-weight: var(--font-weight-medium);
font-size: 15px;
line-height: 20px;
color: var(--tunas-paper);
}
@media (min-width: 1024px) {
.five__word {
font-size: 17px;
}
}
/* --------------------------------------------------------------------------
16c. Trust band (new component)
-------------------------------------------------------------------------- */
.trust-wrapper {
padding: 0 var(--margins-horizontal);
margin: 0 auto;
width: 100%;
max-width: var(--content-max-width);
}
@media (min-width: 1024px) {
.trust-wrapper {
padding: 0 40px;
}
}
.trust {
display: flex;
flex-direction: column;
gap: 32px;
padding: 32px 20px;
border-radius: var(--radius-level-0);
border: 1px solid var(--color-border-supportive);
background: var(--tunas-teal);
color: var(--tunas-paper);
}
@media (min-width: 768px) {
.trust {
padding: 40px;
gap: 40px;
}
}
@media (min-width: 1024px) {
.trust {
padding: 56px;
}
}
.trust__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.trust .header-2,
.trust .header-3,
.trust .p-1 {
color: var(--tunas-paper);
}
.trust__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.trust__grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
.trust__item {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 20px;
border-top: 1px solid rgba(255, 252, 250, 0.28);
}
.trust__item h3 {
font-weight: var(--font-weight-bold);
font-size: 20px;
line-height: 26px;
color: var(--tunas-paper);
}
.trust__item p {
font-weight: var(--font-weight-regular);
font-size: 16px;
line-height: 23px;
color: rgba(255, 252, 250, 0.82);
}
.trust .button--color-inverse.button--primary {
--button-background-color: var(--tunas-paper);
--button-color: var(--tunas-ink);
}
/* --------------------------------------------------------------------------
17. Quotes carousel
-------------------------------------------------------------------------- */
.carousel-quotes {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
background: var(--color-white);
}
@media (min-width: 1024px) {
.carousel-quotes {
padding: 0 40px;
align-items: flex-start;
}
}
.carousel-quotes__content {
display: flex;
padding: 24px var(--margins-horizontal);
margin: 0 auto;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
width: 100%;
max-width: var(--content-max-inner-width);
align-self: stretch;
}
@media (min-width: 768px) {
.carousel-quotes__content {
flex-direction: row;
padding: 20px;
justify-content: space-between;
align-items: center;
}
}
@media (min-width: 1024px) {
.carousel-quotes__content {
padding: 40px 0;
align-items: flex-start;
gap: 48px;
}
}
.carousel-quotes__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
order: 0;
}
@media (min-width: 768px) {
.carousel-quotes__copy {
gap: 34px;
flex: 1 0 0;
}
}
@media (min-width: 1024px) {
.carousel-quotes__copy {
min-height: 520px;
justify-content: center;
}
}
.carousel-quotes__image {
position: relative;
height: 330px;
flex-shrink: 0;
align-self: stretch;
border-radius: var(--radius-level-1);
overflow: hidden;
}
.carousel-quotes__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.carousel-quotes__image {
width: 368px;
height: auto;
}
}
@media (min-width: 1024px) {
.carousel-quotes__image {
width: 555px;
}
}
.quote-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
}
@media (min-width: 768px) {
.quote-block {
gap: 24px;
align-self: stretch;
}
}
.quote-block__text {
--font-size: 34px;
--line-height: 1;
--letter-spacing: 0.4px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size);
line-height: var(--line-height);
letter-spacing: var(--letter-spacing);
font-family: var(--font-family-default);
}
@media (min-width: 600px) {
.quote-block__text {
--font-size: 49px;
--line-height: 55px;
--letter-spacing: 0.42px;
}
}
@media (min-width: 1024px) {
.quote-block__text {
font-size: 49px;
line-height: 55px;
letter-spacing: 0.42px;
}
}
/* --------------------------------------------------------------------------
18. Get the app section
-------------------------------------------------------------------------- */
.section-get-the-app-wrapper {
padding: 0 var(--margins-horizontal);
margin: 0 auto;
width: 100%;
max-width: var(--content-max-width);
}
@media (min-width: 1024px) {
.section-get-the-app-wrapper {
padding: 0 40px;
}
}
.section-get-the-app {
display: flex;
position: relative;
padding: 16px 8px 0 16px;
flex-direction: column;
justify-content: flex-end;
align-self: stretch;
border-radius: var(--radius-level-1);
background: var(--tunas-teal-soft);
}
@media (min-width: 768px) {
.section-get-the-app {
padding: 20px;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
border-radius: var(--radius-level-0);
}
}
@media (min-width: 1024px) {
.section-get-the-app {
min-height: 450px;
padding: 40px;
align-items: center;
border: 1px solid var(--color-border-supportive);
box-shadow: var(--shadow-in-line);
}
}
.section-get-the-app__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
@media (min-width: 768px) {
.section-get-the-app__copy {
width: 400px;
align-self: stretch;
justify-content: center;
}
}
@media (min-width: 1024px) {
.section-get-the-app__copy {
width: calc(100vw - 690px);
justify-content: space-between;
}
}
@media (min-width: 1260px) {
.section-get-the-app__copy {
width: calc(100vw - 746px);
}
}
.section-get-the-app__qr {
display: none;
}
@media (min-width: 1024px) {
.section-get-the-app__qr {
display: block;
}
.section-get-the-app__cta {
display: none;
}
}
.section-get-the-app__image {
margin-top: 24px;
}
.section-get-the-app__image img {
width: 100%;
}
@media (min-width: 768px) {
.section-get-the-app__image {
position: absolute;
bottom: -1px;
right: 60px;
flex-grow: 1;
width: 312px;
height: 190px;
margin-top: 0;
}
.section-get-the-app__image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
}
@media (min-width: 1024px) {
.section-get-the-app__image {
right: 80px;
width: auto;
height: 380px;
}
}
@media (min-width: 1260px) {
.section-get-the-app__image {
right: 100px;
height: 410px;
}
}
.title-description {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
@media (min-width: 768px) {
.title-description {
gap: 16px;
}
}
/* --------------------------------------------------------------------------
19. Footer
-------------------------------------------------------------------------- */
.footer {
padding: var(--margins-vertical) var(--margins-horizontal);
margin: 0 auto;
max-width: var(--content-max-width);
gap: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fff;
}
@media (min-width: 1024px) {
.footer {
padding: 40px;
}
}
.footer__upper {
display: flex;
flex-direction: column;
gap: 40px;
align-self: stretch;
}
@media (min-width: 1024px) {
.footer__upper {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}
.footer__logo {
max-width: 125px;
}
.footer__links {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
align-items: flex-start;
gap: 20px;
}
@media (min-width: 768px) {
.footer__links {
display: flex;
gap: 32px;
}
}
@media (min-width: 1024px) {
.footer__links {
width: 670px;
}
}
.link-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
max-width: 170px;
}
@media (min-width: 1024px) {
.link-group {
max-width: 208px;
flex-shrink: 0;
}
}
.link-group ul {
display: flex;
flex-direction: column;
gap: 16px;
}
.link-group__link-icon {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: top;
margin-top: 1px;
}
.footer__lower {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
align-self: stretch;
width: 100%;
}
@media (min-width: 1024px) {
.footer__lower {
flex-direction: row;
height: 130px;
justify-content: space-between;
align-items: flex-end;
align-self: stretch;
}
}
.footer__lower-right {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
}
@media (min-width: 1024px) {
.footer__lower-right {
flex-direction: row;
min-width: 570px;
max-width: 680px;
justify-content: space-between;
align-items: center;
}
}
.footer__qr {
display: none;
}
@media (min-width: 1024px) {
.footer__qr {
display: block;
}
}
.footer__social {
display: flex;
align-items: flex-start;
gap: 24px;
}
@media (max-width: 349px) {
.footer__social {
gap: 18px;
}
}
@media (min-width: 768px) {
.footer__social {
margin-top: 40px;
}
}
@media (min-width: 1024px) {
.footer__social {
margin-top: 0;
}
}
.footer__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 8px;
align-items: flex-start;
}
@media (min-width: 768px) {
.footer__buttons {
display: flex;
flex-direction: row;
gap: 8px;
}
}
@media (min-width: 1024px) {
.footer__buttons {
align-items: center;
gap: 8px;
}
}
.footer__download-cta {
grid-column: span 2;
}
@media (min-width: 1024px) {
.footer__download-cta {
display: none;
}
}
.footer__language {
grid-column: span 2;
}
.social-link-icon {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: top;
}
.link {
display: inline;
color: var(--color-link-default);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: opacity 0.2s ease;
}
.link--underlined {
border-bottom: 1px solid;
text-decoration: none;
transition: color 0.2s ease;
}
.link--underlined:hover {
color: var(--color-link-default);
}
/* --------------------------------------------------------------------------
20. Dev toolbar + inline copy editing — DEV ONLY
Delete this whole section, the #devbar markup, and the two DEV ONLY
blocks in app.js once the design is settled.
-------------------------------------------------------------------------- */
/* Out of the way for a screenshot.
--------------------------------------------------------------------------
The bar is dev chrome and it sits in the bottom-left corner of every capture.
Two ways to lose it, both non-destructive: press SHIFT+H to toggle it, or
load the page with ?clean in the URL to start without it. Both set
`devbar-off` on the body; nothing else about the page changes, so a
screenshot taken this way is the real page.
Hidden with translate + opacity rather than display:none so the editor's
own state survives — toggling it back mid-edit does not restart anything. */
body.devbar-off .devbar {
opacity: 0;
transform: translateY(140%);
pointer-events: none;
}
.devbar {
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
position: fixed;
left: 16px;
bottom: 16px;
z-index: 999;
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
border-radius: 999px;
background: rgba(17, 24, 31, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(17, 24, 31, 0.28);
}
.devbar__group {
display: flex;
align-items: center;
gap: 4px;
}
.devbar__sep {
width: 1px;
height: 20px;
margin: 0 6px;
background: rgba(255, 252, 250, 0.2);
}
.devbar__label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 252, 250, 0.5);
padding: 0 6px 0 4px;
font-family: var(--font-family-default);
}
.devbar__btn {
font-size: 12px;
line-height: 1;
padding: 7px 11px;
border-radius: 999px;
color: rgba(255, 252, 250, 0.75);
background: transparent;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-family-default);
}
.devbar__btn:hover {
background: rgba(255, 252, 250, 0.12);
color: var(--tunas-paper);
}
.devbar__btn.is-active {
background: var(--tunas-teal);
color: var(--tunas-paper);
}
.devbar__btn--primary {
background: rgba(255, 252, 250, 0.14);
color: var(--tunas-paper);
}
.devbar__btn--primary.is-active {
background: var(--tunas-coral);
color: #fff;
}
.devbar__btn--danger:hover {
background: rgba(230, 108, 93, 0.28);
color: #fff;
}
.devbar__status {
font-size: 11px;
color: rgba(255, 252, 250, 0.55);
padding: 0 4px 0 8px;
font-family: var(--font-family-default);
max-width: 190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 900px) {
.devbar {
left: 8px;
right: 8px;
bottom: 8px;
justify-content: center;
flex-wrap: wrap;
}
.devbar__sep {
display: none;
}
}
/* ---- edit mode ---------------------------------------------------------- */
body.is-editing [data-editable] {
outline: 1px dashed rgba(15, 143, 134, 0.5);
outline-offset: 3px;
border-radius: 2px;
cursor: text;
transition: outline-color 0.15s ease, background-color 0.15s ease;
}
body.is-editing [data-editable]:hover {
outline-color: var(--tunas-teal);
background-color: rgba(15, 143, 134, 0.06);
}
body.is-editing [data-editable]:focus {
outline: 2px solid var(--tunas-teal);
outline-offset: 3px;
background-color: rgba(15, 143, 134, 0.08);
}
body.is-editing [data-editable].is-changed {
outline-style: solid;
outline-color: rgba(230, 108, 93, 0.55);
}
/* Lay the hero deck out flat while editing so every card label is reachable
instead of cycling off-stage mid-edit. */
body.is-editing .hero__animation {
transform: none;
height: auto;
width: 100%;
max-width: var(--content-max-inner-width);
padding: 0;
position: relative;
top: auto;
left: auto;
margin: 0 auto;
}
body.is-editing .animation-cards {
display: flex;
flex-direction: row;
gap: 10px;
height: 400px;
transform: none;
}
body.is-editing .animation-card {
position: relative;
flex: 1 1 0;
width: auto;
height: 100%;
opacity: 1 !important;
transform: none !important;
animation: none !important;
overflow: hidden;
border-radius: 12px;
}
body.is-editing .animation-card__img {
-webkit-mask-image: none;
mask-image: none;
}
body.is-editing .animation-card__text {
height: auto;
transform: none;
padding: 10px;
background: linear-gradient(0deg, rgba(17, 24, 31, 0.75), transparent);
}
.footer__blurb {
margin: 18px 0 0;
max-width: 34ch;
font-family: var(--font-family-default);
font-size: 13.5px;
line-height: 1.5;
color: var(--tunas-muted);
}
/* Five columns once there is room for them, rather than the two the
placeholder shipped with — the point of populating them is seeing whether
they hold. */
@media (min-width: 1024px) {
.footer__links {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
}
/* --------------------------------------------------------------------------
The globe's payout quotes — source copy, not content
--------------------------------------------------------------------------
globe.js reads these by id and paints them onto the ring; the list itself is
never meant to be on the page. Its own comment said "shown only in edit
mode" and the rule that did that was never written, so it has been sitting
at the very bottom of the document as a raw list of strings the whole time —
invisible only because nothing was below the footer to scroll to. The
oversized wordmark put something there and it surfaced.
Same arrangement the other editable source lists get: out of the layout
normally, a panel in the corner while the editor is open. */
.payouts {
display: none;
}
body.is-editing .payouts {
position: fixed;
left: 16px;
bottom: 76px;
z-index: 40;
display: grid;
gap: 10px;
width: min(320px, 34vw);
max-height: 46vh;
overflow: auto;
/* The wheel stays in the panel rather than chaining to a page that is a
mandatory snap container, where one chained scroll jumps a whole section. */
overscroll-behavior: contain;
margin: 0;
padding: 14px 16px;
border-radius: 12px;
background: var(--tunas-paper);
box-shadow: 0 18px 44px rgb(17 24 31 / 0.2);
list-style: none;
text-align: left;
}
body.is-editing .payouts::before {
content: "Globe payouts";
font-family: var(--font-family-default);
font-size: 10.5px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tunas-muted);
}
body.is-editing .payouts li {
display: grid;
gap: 2px;
font-family: var(--font-family-default);
font-size: 13px;
line-height: 1.4;
color: var(--tunas-ink-soft);
}
body.is-editing .payout__who {
font-size: 11.5px;
color: var(--tunas-muted);
}
/* The logo column has to hold the blurb under it. Capped at 125px it was the
width of the mark alone, so the paragraph wrapped one or two words to a line
and squeezed the link columns into the remaining sliver. */
.footer__logo {
max-width: 100%;
}
@media (min-width: 1024px) {
.footer__logo {
flex: 0 0 264px;
max-width: 264px;
}
.footer__links {
flex: 1;
}
}
.footer__logo .logo {
max-width: 125px;
}