/* ============================================================= efrîn özyetiş — Portfolio Design System colors_and_type.css The artwork in landing/landingpage-01.svg IS the design system. These tokens are extracted from that SVG so that any chrome you add (overlays, modals, controls, captions, secondary pages) sits inside the same palette without restyling the artwork. Rule 1 (from README): do not restyle the artwork. These tokens are for surrounding UI only. ============================================================= */ /* ---------- Antikor Text — full family -------------------------- The artwork's elements use font-family="AntikorText-Book, 'Antikor Text'". We register both names so the SVG resolves to the real font without any artwork edit, and chrome can use other weights too. */ /* Hairline / Thin / ExtraLight / Light / News / Book / Regular / Medium / SemiBold / Bold / ExtraBold — 11 weights, each with an italic. CSS font-weight allows any integer 1–1000 in modern browsers; this gives every weight an unambiguous slot. */ @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Hairline.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-HairlineItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Thin.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-ThinItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-ExtraLight.ttf") format("truetype"); font-weight: 250; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-ExtraLightItalic.ttf") format("truetype"); font-weight: 250; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-News.ttf") format("truetype"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-NewsItalic.ttf") format("truetype"); font-weight: 350; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-BookItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Regular.ttf") format("truetype"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-RegularItalic.ttf") format("truetype"); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Antikor Text"; src: url("./fonts/AntikorText-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; } /* Alias — the artwork SVG declares font-family="AntikorText-Book". This registration makes that exact name resolve to the same file without editing the artwork. */ @font-face { font-family: "AntikorText-Book"; src: url("./fonts/AntikorText-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---------- Surface (pulled directly from the SVG) ---------- */ --bg-room: #ebd1e3; /* pink wall — landing background */ --bg-poster: #daf9d7; /* pegboard / green poster */ --bg-paper: #fbf7e8; /* cream paper */ --bg-paper-2: #fffbf0; /* warmer cream */ --bg-paper-3: #e1decf; /* dusty cream */ --bg-dark: #ffffff; /* overlay/page surface (was #111) */ /* ---------- Object palette (the pinboard squares) ----------- */ --tile-brown: #946a28; --tile-brown-2: #825a24; --tile-walnut: #69461b; --tile-teal: #94c8c2; --tile-yellow: #fce39d; --tile-lavender: #dabfd7; --tile-rose: #d98eb6; --tile-rose-2: #d68bb4; --tile-rose-3: #e09cbf; --tile-stone: #a09e94; --tile-stone-2: #dadcd7; --tile-bone: #d3cfbe; --tile-mustard: #afa117; /* the dense texture / knit color */ --tile-green: #238039; /* ---------- Ink (line + type) ------------------------------- */ --ink: #231f20; /* primary line / outline */ --ink-pure: #000000; /* used where the SVG uses #000 */ --ink-indigo: #2e3191; /* the navy used for body text */ --ink-rust: #2a0000; --ink-pale: #868688; /* ---------- Highlights (interaction layer) ------------------ */ --hot-red: #ff1a1a; /* trigger hover affordance */ --hot-red-soft: rgba(255, 26, 26, 0.10); --hot-red-line: rgba(255, 0, 7, 1); /* matches SVG accent */ --hot-pink: #ff0080; /* a single rare pink accent */ --hot-violet: #ccccff; /* ---------- Type system ------------------------------------- */ --font-body: "Antikor Text", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: var(--font-body); /* one family, eleven weights */ /* The SVG label uses font-size: 2.5 inside an 800-unit viewBox. Renderings of the artwork keep that as-is. For chrome around the artwork, this scale takes over. */ --type-xs: 11px; --type-sm: 13px; --type-base: 15px; --type-md: 18px; --type-lg: 22px; --type-xl: 32px; --lh-tight: 1.15; --lh-body: 1.45; --tracking-wide: 0.04em; --tracking-tight: -0.02em; /* ---------- Motion (from scaffold) -------------------------- */ --motion-fast: 180ms; /* trigger hover fade */ --motion-deck: 460ms; /* snap-to-section slide */ --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Semantic helpers used by overlay chrome only ----- */ .text-body { font-family: var(--font-body); font-size: var(--type-base); line-height: var(--lh-body); color: var(--ink); } .text-label { font-family: var(--font-body); font-size: var(--type-sm); letter-spacing: var(--tracking-wide); text-transform: lowercase; color: var(--ink-indigo); } .text-num { font-family: var(--font-body); font-size: var(--type-md); color: var(--ink-indigo); font-variant-numeric: tabular-nums; } .text-quiet { color: var(--ink-pale); } /* Buttons / controls match the deck overlay's vocabulary. See ui_kits/portfolio/ for usage. */ .ctl { font-family: var(--font-body); font-size: var(--type-sm); letter-spacing: var(--tracking-wide); color: var(--ink); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(35, 31, 32, 0.18); border-radius: 999px; padding: 0.55rem 0.9rem; cursor: pointer; backdrop-filter: blur(4px); box-shadow: 0 1px 2px rgba(35, 31, 32, 0.06); transition: background var(--motion-fast) var(--ease-quiet), border-color var(--motion-fast) var(--ease-quiet); } .ctl:hover { background: #ffffff; border-color: rgba(35, 31, 32, 0.32); } .ctl:disabled { opacity: 0.3; cursor: default; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 1ms; --motion-deck: 1ms; } }