/* ============================================================================ Hyperia design tokens ---------------------------------------------------------------------------- Every value here was read out of the Figma vector source (Panel.svg / Sohbet Aktif.svg / Frame 890.svg), not sampled from a screenshot. Design canvas is 1920x1080. Sizes are clamp()ed against that: pixel-exact at 1920, scaling down proportionally on smaller screens. Linked by demo.html and login.html. dev.css keeps its own :root and does not use this file -- /dev is frozen, and a page we aren't testing must not be able to break. ========================================================================== */ :root { /* ---- palette (the 6 official swatches) --------------------------------- NB: the 5th swatch is mislabelled "#FFA630" in the Figma palette; it is actually #F5F5F5. Confirmed by sampling the swatch itself. */ --blue: #204B8E; /* brand, headings, filled segment, logout, links */ --slate: #404054; /* body text */ --periwinkle: #D1DDF7; /* avatar tile; @20% = surface boxes; chat glow */ --orange: #FFA630; /* sub-headline, tile gradient end, "+" icon */ --gray: #F5F5F5; /* assistant bubble, segment track, icon-on-blue */ --white: #FFFFFF; /* cards, header */ /* ---- colours the palette sheet omits but the screens use --------------- */ --orange-soft: #F2D2A9; /* tile gradient start */ --page-bg: #F6F6FB; /* panel page background */ --border: #EEEEEE; /* "+" button hairline */ --user-bubble: #E7EDFA; /* user chat bubble */ /* Surface boxes ("Olası etkiler", event items) are periwinkle at 20%, which resolves to #F6F8FD over white -- verified against the sampled pixels. */ --surface: rgba(209, 221, 247, 0.20); /* ---- status tones ----------------------------------------------------- Four come from the Frame 890 component and appear as team-row pills. `caution` and `alert` are the badge tones on the personal-insight card — they are the ones with a leading dot, and each dot has its own colour. caution -> Maya's "Hizalanma Riski" (amber) alert -> Alex's "Görünmeyen bağımlılık" (red) */ --tone-critical-bg: #FFE5E5; --tone-critical-fg: #CB4537; /* Kesintili */ --tone-danger-bg: #FDEAD7; --tone-danger-fg: #B96642; /* Risk altında */ --tone-warning-bg: #FEE6AA; --tone-warning-fg: #886012; /* Sapma eğiliminde */ --tone-ok-bg: rgba(227, 245, 216, 0.5); /* #E3F5D8 @ 50% */ --tone-ok-fg: #387112; /* Ritimde */ --tone-caution-bg: #FBF3D0; --tone-caution-fg: #7F4C0A; --tone-caution-dot: #F2B05C; --tone-alert-bg: rgba(254, 31, 30, 0.25); /* -> #FFC7C7 over white */ --tone-alert-fg: #6B191B; --tone-alert-dot: #FE1F1E; /* ---- type ------------------------------------------------------------- Inter throughout. The sub-headline is Bold *Italic*, so the italic axis must be loaded or the browser will fake-slant it. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-h1: clamp(32px, 2.92vw, 56px); /* Bold */ --fs-h1-sub: clamp(20px, 1.88vw, 36px); /* Bold Italic */ --fs-h2: clamp(18px, 1.25vw, 24px); /* Semibold */ --fs-h3: clamp(15px, 0.94vw, 18px); /* Semibold */ --fs-text: clamp(14px, 0.94vw, 18px); /* Regular */ --fs-small: clamp(12px, 0.73vw, 14px); /* Medium */ --fs-btn: clamp(13px, 0.83vw, 16px); /* Medium */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- radii ------------------------------------------------------------ Pills/buttons/segments are all exactly h/2 in the design, i.e. fully rounded, so they use --r-pill rather than a literal. */ --r-card: clamp(24px, 2.55vw, 49px); /* cards: 49 */ --r-tile: 15px; /* avatar tile, event item: 15 */ --r-pill: 999px; /* pill 18.5, button 22.5, segment 23.625 */ /* ---- layout (1920 canvas) -------------------------------------------- 100 + 600 + 45 + 600 + 45 + 430 + 100 = 1920 exactly. */ --page-margin: clamp(20px, 5.21vw, 100px); --card-gap: clamp(16px, 2.34vw, 45px); --card-inset: clamp(20px, 2.60vw, 50px); --header-h: clamp(64px, 5.05vw, 97px); /* ---- effects ---------------------------------------------------------- */ --tile-gradient: linear-gradient(180deg, var(--orange-soft) 0%, var(--orange) 100%); --shadow-card: 0 2px 24px rgba(32, 75, 142, 0.06); --shadow-header: 0 1px 12px rgba(32, 75, 142, 0.05); --shadow-soft: 2px 2px 4px rgba(0, 0, 0, 0.05); /* the "+" button, from Frame 867 */ } /* ============================================================================ Reset / base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); font-size: var(--fs-text); font-weight: var(--fw-regular); color: var(--slate); background: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } svg { display: block; flex-shrink: 0; } /* ============================================================================ Status pills ---------------------------------------------------------------------------- Labels are free text; the tone drives the colour. Adding a new status label later needs no CSS change -- only a new `tone` value would. ========================================================================== */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 clamp(10px, 0.83vw, 16px); height: clamp(26px, 1.93vw, 37px); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; } .pill[data-tone="critical"] { background: var(--tone-critical-bg); color: var(--tone-critical-fg); } .pill[data-tone="danger"] { background: var(--tone-danger-bg); color: var(--tone-danger-fg); } .pill[data-tone="warning"] { background: var(--tone-warning-bg); color: var(--tone-warning-fg); } .pill[data-tone="ok"] { background: var(--tone-ok-bg); color: var(--tone-ok-fg); } .pill[data-tone="caution"] { background: var(--tone-caution-bg); color: var(--tone-caution-fg); } .pill[data-tone="alert"] { background: var(--tone-alert-bg); color: var(--tone-alert-fg); } /* The insight-card badge carries a leading dot, and the dot is its own colour per tone — brighter than the text, so it reads as a status light rather than a bullet. */ .pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .pill--dot[data-tone="caution"]::before { background: var(--tone-caution-dot); } .pill--dot[data-tone="alert"]::before { background: var(--tone-alert-dot); } /* ============================================================================ Orange icon tiles ---------------------------------------------------------------------------- Vertical gradient + a soft inner glow. The Figma version layers a backdrop blur on top; at 43px that reads identically without the machinery. ========================================================================== */ .tile { display: grid; place-items: center; width: clamp(34px, 2.24vw, 43px); height: clamp(34px, 2.24vw, 43px); border-radius: var(--r-tile); background: var(--tile-gradient); color: var(--white); box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.45); flex-shrink: 0; } .tile svg { width: 55%; height: 55%; } /* ============================================================================ Icons — every extracted SVG uses currentColor, so an icon takes the colour of whatever it sits in (white on the active blue segment, blue on the inactive). ========================================================================== */ .icon { width: 24px; height: 24px; color: currentColor; }