/* ============================================================================ EFE ARABACI — DESIGN SYSTEM colors_and_type.css — foundational color + typography tokens ---------------------------------------------------------------------------- Personal brand of Efe Burak Arabacı, automotive & industrial designer (Turin). Visual world: cinematic darkroom, golden-ratio engineering overlays, acid-lime energy strokes, white aerodynamic monogram. "Generating Appealing Solutions." ============================================================================ */ /* ---- Fonts ----------------------------------------------------------------- DISPLAY: Clash Display (Fontshare, free for commercial use) — a confident, premium grotesque widely used in modern automotive/design portfolios; the closest characterful match to the portfolio's heavy wordmark. Archivo Expanded is the fallback if Fontshare is unavailable. UI / BODY: Archivo (Google) — clean neo-grotesque workhorse. MONO: JetBrains Mono — technical captions / spec coordinates. */ @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Archivo+Expanded:wght@400..900&family=Allura&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ===== CORE PALETTE ===================================================== */ /* Black is the canvas. The brand lives in the dark. */ --black: #0A0A0A; /* primary canvas */ --black-true: #000000; /* full-bleed letterbox / pure black */ --ink-900: #141414; /* raised surface on black */ --ink-800: #1C1C1E; /* card / panel */ --ink-700: #2A2A2C; /* elevated card, hairline-backed surfaces */ --ink-600: #3A3A3D; /* borders on dark, dividers */ --ink-500: #56565A; /* disabled text on dark */ --ink-400: #6E6E73; /* tertiary text on dark */ --ink-300: #9A9A9F; /* secondary text on dark */ --ink-200: #C7C7CA; /* faint text */ /* Light side (the "Hello!" / about world is white) */ --paper: #F4F4F1; /* off-white canvas */ --paper-pure: #FFFFFF; /* pure white surface / monogram plate */ --paper-mute: #E4E4DF; /* light divider / muted light surface */ /* ===== SIGNATURE ACCENT — ACID LIME ==================================== */ /* The energy of the brand. Brush strokes, highlights, live cursors, CTAs. */ --lime: #D8FF00; /* sampled from portfolio (h69 s1.0 v1.0) */ --lime-bright: #E6FF3A; /* hover / glow */ --lime-deep: #A6C400; /* pressed / shadow-side */ --lime-glow: rgba(216, 255, 0, 0.35); /* outer glow / focus ring */ /* ===== RACING RED — secondary accent =================================== */ /* GR-Aero / Scorpio stage energy. Sparingly: alerts, key highlights. */ --red: #DB3B3E; /* racing red */ --red-bright: #F24B4E; --maroon: #4A1418; /* deep Scorpio stage maroon (surfaces only) */ --maroon-deep: #2A0C0F; /* ===== PROJECT / MARQUE TAGS =========================================== */ /* Used only on project cards to evoke each client marque. Not brand colors. */ --tag-scorpio: #4A1418; /* Mahindra maroon */ --tag-lotus: #0A3B2E; /* Lotus british racing green */ --tag-neokei: #1466C8; /* Honda Neo-Kei blue */ --tag-toyota: #E8482C; /* Toyota GR orange-red */ --tag-other: #1C1C1E; /* marine / misc */ /* ===== SEMANTIC ROLES (dark-first) ===================================== */ --bg: var(--black); --surface: var(--ink-800); --surface-2: var(--ink-700); --border: var(--ink-600); --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.20); --fg: var(--paper); /* primary text on dark */ --fg-1: var(--paper); /* alias */ --fg-2: var(--ink-300); /* secondary */ --fg-3: var(--ink-400); /* tertiary / captions */ --fg-on-light: var(--black); /* text on white surfaces */ --accent: var(--lime); --accent-fg: var(--black); /* text sitting ON lime */ --focus: var(--lime-glow); /* ===== TYPE FAMILIES =================================================== */ --font-display: 'Clash Display', 'Archivo Expanded', 'Archivo', sans-serif; --font-sans: 'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ===== TYPE SCALE (fluid, 1920 design width) =========================== */ --fs-mega: clamp(4rem, 13vw, 13rem); /* hero wordmark PORTFOLIO */ --fs-display: clamp(3rem, 8vw, 7rem); /* section openers */ --fs-h1: clamp(2.25rem, 4.5vw, 4rem); --fs-h2: clamp(1.75rem, 3vw, 2.75rem); --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-mono-cap: 0.6875rem; /* tracked technical captions */ /* ===== WEIGHTS ========================================================= */ --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800; --w-black: 900; /* ===== TRACKING ======================================================== */ --track-mega: -0.02em; /* tight on huge display */ --track-tight: -0.01em; --track-normal: 0em; --track-wide: 0.08em; /* labels EFE ARABACI / CONTENTS */ --track-mono: 0.16em; /* technical mono captions */ /* ===== RADII =========================================================== */ --r-none: 0px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* the contents/stadium capsule motif */ /* ===== SPACING (8pt base) ============================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ===== SHADOWS / ELEVATION (deep, cinematic) =========================== */ --shadow-card: 0 2px 8px rgba(0,0,0,0.45), 0 12px 40px rgba(0,0,0,0.55); --shadow-float: 0 8px 24px rgba(0,0,0,0.55), 0 32px 80px rgba(0,0,0,0.65); --shadow-lime: 0 0 0 1px var(--lime), 0 0 28px var(--lime-glow); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* ===== MOTION ========================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* primary — confident decel */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);/* slight overshoot, sparing */ --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-cine: 1200ms; /* epic transitions (intro → hub) */ } /* ============================================================================ SEMANTIC TYPOGRAPHY — apply these classes or copy the rules ============================================================================ */ .ea-mega { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-mega); line-height: 0.88; letter-spacing: var(--track-mega); text-transform: uppercase; color: var(--fg); } h1, .ea-h1 { font-family: var(--font-display); font-weight: var(--w-extra); font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--fg); } h2, .ea-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--track-tight); color: var(--fg); } h3, .ea-h3 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: 1.2; color: var(--fg); } p, .ea-body { font-family: var(--font-sans); font-weight: var(--w-reg); font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0; color: var(--fg-2); text-wrap: pretty; } /* Wide tracked label — EFE ARABACI, CONTENTS, nav items */ .ea-label { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-sm); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg); } /* Technical mono caption — coordinates, specs, figure annotations */ .ea-mono { font-family: var(--font-mono); font-weight: var(--w-med); font-size: var(--fs-mono-cap); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); } /* Lime energy text */ .ea-accent { color: var(--lime); } /* The signature split: half white / half lime (as on PORTFOLIO cover) */ .ea-split { background: linear-gradient(90deg, var(--paper) 0 50%, var(--lime) 50% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }