/* ========================================================================== CREATOR EMBASSY — Design System "Dark Diplomatic Luxe" — ink-green dark, emerald glow, champagne gold Edit the tokens below to re-theme the entire site. ========================================================================== */ :root { /* Surfaces */ --ink: #0A1410; /* page background */ --ink-2: #0E1B15; /* raised band */ --ink-3: #122218; /* card */ --ink-4: #172B1F; /* card hover / inset */ /* Brand */ --emerald: #1D9E75; --emerald-bright: #2FCE9B; --mint: #7FE8C4; --gold: #D4B86A; --gold-bright: #E8D49A; /* Text */ --text: #F2F7F4; --text-soft: #C5D6CC; --text-dim: #92AC9E; /* Lines & glass */ --line: rgba(127, 232, 196, 0.14); --line-gold: rgba(212, 184, 106, 0.30); --glass: rgba(18, 34, 24, 0.55); --glass-brt: rgba(127, 232, 196, 0.06); /* Type */ --font-head: "Space Grotesk", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; /* Shape & shadow */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 60px -10px rgba(29, 158, 117, 0.35); /* Layout */ --container: 1180px; --gutter: clamp(20px, 4vw, 48px); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Lenis adds .lenis to when active. CSS smooth-scroll MUST be off then — the browser animating toward positions Lenis sets per-frame causes stutter. */ html.lenis, html.lenis body { scroll-behavior: auto !important; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } p { margin: 0 0 1em; color: var(--text-soft); } a { color: var(--mint); text-decoration: none; } a:hover { color: var(--emerald-bright); } :focus-visible { outline: 2px solid var(--emerald-bright); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--emerald); color: var(--ink); } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--emerald); color: var(--ink); padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ---------- Film grain overlay (viewport-sized, tiled — cheap to composite) ---------- */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 900; /* under header (1000), mobile nav and banner */ opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ---------- Eyebrow / kicker ---------- */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: 0.7; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 15px 32px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.25s cubic-bezier(.2,.8,.3,1), box-shadow 0.25s, background 0.25s, color 0.25s, border-color 0.25s; min-height: 48px; will-change: transform; } .btn--primary { background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-bright) 100%); color: #06120D; box-shadow: 0 8px 30px -8px rgba(29, 158, 117, 0.55); position: relative; overflow: hidden; } .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: left 0.55s cubic-bezier(.2,.8,.3,1); } .btn--primary:hover::after { left: 130%; } @media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } } .btn--primary:hover { color: #06120D; box-shadow: 0 14px 44px -8px rgba(47, 206, 155, 0.65); transform: translateY(-2px); } .btn--ghost { background: var(--glass-brt); border-color: var(--line); color: var(--text); backdrop-filter: blur(8px); } .btn--ghost:hover { border-color: var(--emerald-bright); color: var(--mint); } .btn--gold { background: transparent; border-color: var(--line-gold); color: var(--gold-bright); } .btn--gold:hover { background: rgba(212,184,106,.1); color: var(--gold-bright); } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(10, 20, 16, 0.82); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; } .logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: 0.16em; color: var(--text); } .logo:hover { color: var(--mint); } .logo svg { width: 30px; height: 24px; flex: none; } .nav-desktop { display: flex; align-items: center; gap: 30px; } .nav-desktop a { font-family: var(--font-head); font-size: 0.92rem; font-weight: 500; color: var(--text-soft); position: relative; padding-block: 6px; } .nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(.2,.8,.3,1); } .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--text); } .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-cta .btn { padding: 11px 24px; min-height: 44px; font-size: 0.92rem; } /* dropdown */ .nav-drop { position: relative; } .nav-drop > a { display: inline-flex; align-items: center; gap: 6px; } .nav-drop__panel { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; min-width: 250px; background: rgba(14, 27, 21, 0.95); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; translate: -50% 8px; transition: opacity 0.25s, translate 0.25s, visibility 0.25s; } .nav-drop:hover .nav-drop__panel, .nav-drop:focus-within .nav-drop__panel { opacity: 1; visibility: visible; translate: -50% 0; } .nav-drop__panel a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; color: var(--text-soft); } .nav-drop__panel a:hover { background: var(--glass-brt); color: var(--mint); } .nav-drop__panel a::after { display: none; } /* mobile nav */ .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; width: 46px; height: 46px; cursor: pointer; color: var(--text); align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } .nav-mobile { position: fixed; inset: 0; z-index: 999; background: rgba(10, 20, 16, 0.97); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; } .nav-mobile.open { opacity: 1; visibility: visible; } .nav-mobile a { font-family: var(--font-head); font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 600; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--line); } .nav-mobile a:hover { color: var(--mint); } .nav-mobile .nav-mobile__sub { font-size: 1.05rem; color: var(--text-dim); padding: 9px 0 9px 18px; border-bottom: none; } .nav-mobile .btn { margin-top: 28px; border-bottom: none; } @media (max-width: 980px) { .nav-desktop, .nav-cta .btn--ghost { display: none; } .nav-toggle { display: inline-flex; } } /* ---------- Sections ---------- */ .section { padding-block: clamp(72px, 11vw, 140px); position: relative; } .section--band { background: var(--ink-2); border-block: 1px solid var(--line); } .section-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .kicker { justify-content: center; } .section-head--center .kicker::before { display: none; } /* ---------- Cards ---------- */ .card { background: linear-gradient(160deg, var(--ink-3) 0%, var(--ink-2) 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3.4vw, 38px); position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.3,1), border-color 0.35s, box-shadow 0.35s; } /* hairline of light along the card's top edge */ .card::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 232, 196, 0.35), transparent); } .card:hover { transform: translateY(-6px); border-color: rgba(127, 232, 196, 0.32); box-shadow: var(--shadow), var(--shadow-glow); } .card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(29, 158, 117, 0.14); border: 1px solid var(--line); color: var(--mint); margin-bottom: 20px; } .card__icon svg { width: 25px; height: 25px; } .card h3 { margin-bottom: 10px; } .card p { margin-bottom: 0; font-size: 0.97rem; } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 920px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } /* ---------- Embassy seal divider ---------- */ .seal-divider { display: flex; align-items: center; gap: 18px; margin-block: clamp(40px, 6vw, 64px); color: var(--gold); } .seal-divider::before, .seal-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); } .seal-divider svg { width: 30px; height: 24px; opacity: 0.85; } /* ---------- Quick answer (AEO) ---------- */ .quick-answer { background: linear-gradient(150deg, rgba(29,158,117,0.12), rgba(212,184,106,0.05)); border: 1px solid var(--line); border-left: 3px solid var(--emerald-bright); border-radius: var(--radius-sm); padding: 26px 30px; margin-bottom: clamp(36px, 5vw, 56px); } .quick-answer__label { font-family: var(--font-head); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--emerald-bright); margin-bottom: 10px; display: block; } .quick-answer p { margin: 0; font-size: 1.08rem; color: var(--text); } /* ---------- Key facts table ---------- */ .facts-table { width: 100%; border-collapse: collapse; margin-bottom: clamp(36px, 5vw, 56px); } .facts-table th, .facts-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.96rem; } .facts-table th { font-family: var(--font-head); font-weight: 600; color: var(--gold); white-space: nowrap; width: 220px; } .facts-table td { color: var(--text-soft); } @media (max-width: 640px) { .facts-table th { width: 130px; padding: 12px 10px; } .facts-table td { padding: 12px 10px; } } /* ---------- TOC ---------- */ .toc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 26px; margin-bottom: clamp(36px, 5vw, 56px); background: var(--ink-2); } .toc strong { font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 12px; } .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 40px; } .toc li { padding-block: 4px; } .toc a { color: var(--text-soft); font-size: 0.95rem; } .toc a:hover { color: var(--mint); } @media (max-width: 640px) { .toc ol { columns: 1; } } /* ---------- Comparison table ---------- */ .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); } .compare-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--ink-2); } .compare-table th, .compare-table td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.94rem; } .compare-table th { font-family: var(--font-head); font-weight: 600; color: var(--text); background: var(--ink-3); } .compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--text-soft); position: sticky; left: 0; background: var(--ink-3); } .compare-table th.is-embassy, .compare-table td.is-embassy { background: rgba(29, 158, 117, 0.13); color: var(--mint); font-weight: 600; } .compare-table .yes { color: var(--emerald-bright); } .compare-table .no { color: #5C6F65; } .compare-table tbody tr { transition: background 0.2s; } .compare-table tbody tr:hover { background: rgba(127, 232, 196, 0.04); } /* ---------- FAQ accordion ---------- */ .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 4px; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--text); transition: color 0.25s; } .faq-item summary:hover { color: var(--mint); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--gold); transition: rotate 0.3s; flex: none; line-height: 1; } .faq-item[open] summary::after { rotate: 45deg; } .faq-item .faq-body { padding: 0 4px 24px; color: var(--text-soft); max-width: 70ch; } .faq-item .faq-body p { margin-bottom: 0.6em; } /* ---------- Forms ---------- */ .form { display: grid; gap: 18px; } .form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-soft); } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.25s, box-shadow 0.25s; min-height: 48px; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--emerald-bright); box-shadow: 0 0 0 3px rgba(47, 206, 155, 0.18); } .field .error-msg { color: #F08A8A; font-size: 0.85rem; margin-top: 6px; display: none; } .field.invalid input, .field.invalid textarea { border-color: #C24545; } .field.invalid .error-msg { display: block; } .form-status { font-size: 0.95rem; } .form-status.success { color: var(--emerald-bright); } .form-status.error { color: #F08A8A; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink) 0%, #060D0A 100%); padding: clamp(56px, 8vw, 90px) 0 36px; position: relative; overflow: hidden; } /* giant watermark wordmark */ .site-footer::before { content: "EMBASSY"; position: absolute; left: 50%; bottom: -0.34em; translate: -50% 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(6rem, 18vw, 17rem); letter-spacing: 0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(127, 232, 196, 0.07); pointer-events: none; white-space: nowrap; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 5vw, 56px); margin-bottom: 56px; } @media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand p { font-size: 0.94rem; max-width: 34ch; } .footer-col h4 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 11px; } .footer-col a { color: var(--text-dim); font-size: 0.94rem; } .footer-col a:hover { color: var(--mint); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-dim); } .footer-bottom a { color: var(--text-dim); margin-left: 18px; } .footer-bottom a:hover { color: var(--mint); } /* ---------- Store badges ---------- */ .store-badges { display: flex; gap: 14px; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); backdrop-filter: blur(8px); color: var(--text); min-height: 56px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .store-badge:hover { border-color: var(--emerald-bright); color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-glow); } .store-badge svg { width: 26px; height: 26px; flex: none; } .store-badge small { display: block; font-size: 0.68rem; color: var(--text-dim); line-height: 1.2; } .store-badge strong { font-family: var(--font-head); font-size: 0.98rem; line-height: 1.2; display: block; } .store-note { font-size: 0.85rem; color: var(--text-dim); margin-top: 12px; } /* ---------- Reveal-on-scroll (elevated, clip + lift) ---------- */ [data-reveal] { opacity: 0; } .no-js [data-reveal], html.qa [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero { padding: clamp(150px, 20vw, 220px) 0 clamp(56px, 8vw, 90px); position: relative; overflow: hidden; isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 80% 10%, rgba(29, 158, 117, 0.22), transparent 60%), radial-gradient(50% 70% at 12% 80%, rgba(212, 184, 106, 0.10), transparent 60%), var(--ink); } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 180deg at 70% -10%, transparent 0deg, rgba(47,206,155,0.10) 80deg, transparent 160deg); animation: heroSpin 26s linear infinite; transform-origin: 70% -10%; } @keyframes heroSpin { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } } .page-hero .breadcrumbs { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .page-hero .breadcrumbs a { color: var(--text-dim); } .page-hero .breadcrumbs a:hover { color: var(--mint); } .page-hero .breadcrumbs span[aria-hidden] { color: var(--gold); } .page-hero .lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); max-width: 64ch; color: var(--text-soft); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; border-block: 1px solid var(--line-gold); background: radial-gradient(70% 120% at 50% 130%, rgba(29, 158, 117, 0.30), transparent 65%), var(--ink-2); text-align: center; padding-block: clamp(72px, 11vw, 130px); } /* faint crown watermark behind the CTA */ .cta-band::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, 80vw); aspect-ratio: 200 / 160; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cpath d='M40 130 L15 42 L60 82 L100 0 L140 82 L185 42 L160 130 Z' fill='none' stroke='%23D4B86A' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.07; pointer-events: none; } .cta-band h2 { max-width: 18ch; margin-inline: auto; } .cta-band p { max-width: 52ch; margin-inline: auto; } .cta-band .btn-row { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cta-band .store-badges { justify-content: center; margin-top: 28px; } /* ---------- Custom cursor (desktop pointer only — JS adds .has-cursor) ---------- */ html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label { cursor: none; } /* keep the native I-beam where people type */ html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; border-radius: 50%; translate: -50% -50%; } .cursor-dot { width: 7px; height: 7px; background: var(--emerald-bright); box-shadow: 0 0 12px rgba(47, 206, 155, 0.8); } .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(212, 184, 106, 0.55); background: transparent; transition: width 0.3s cubic-bezier(.2,.8,.3,1), height 0.3s cubic-bezier(.2,.8,.3,1), border-color 0.3s, background 0.3s, opacity 0.3s; } /* over links / buttons: ring blooms gold */ .cursor-ring.is-link { width: 58px; height: 58px; border-color: var(--gold); background: rgba(127, 232, 196, 0.07); } /* pressing */ .cursor-ring.is-down { width: 28px; height: 28px; border-color: var(--mint); } /* over text fields: hand back to the native cursor */ .cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity: 0; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-soft); } .gold { color: var(--gold-bright); } .mint { color: var(--mint); } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }