/* ========================================================================== DoInIstanbul design system (Sprint 0, frozen from the T01 home concept) 1. Season palettes 2. Scopes 3. Base 4. Layout 5. Type 6. Atoms Component-specific rules live next to each component (*.razor.css). ========================================================================== */ /* 0. Fonts (self-hosted, wwwroot/fonts) ----------------------------------------- Source: Google Fonts (SIL OFL), downloaded as WOFF2 per unicode subset. The browser picks the file by unicode-range, so Turkish letters (ı ş ğ İ) load the small latin-ext file only when used. Figtree is a VARIABLE font: one file serves every weight 400-700 (no per-weight files). font-display: swap = text shows at once in the fallback font, no invisible-text period. To add a language that needs more glyphs (e.g. cyrillic), download that subset the same way. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/young-serif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/young-serif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1. Season palettes --------------------------------------------------------- Each season has a light (l-) and dark (d-) set. Put data-season on any element; nested elements may switch season (see SeasonNotes). */ [data-season="spring"] { --l-bg: #FBF5F7; --l-ink: #2A1B22; --l-accent: #9C3D6E; --l-muted: #6B5560; --l-rule: #EADAE1; --l-soft: #F4E3EA; --l-chip: #D9C3CD; --d-bg: #241A20; --d-ink: #F7EEF2; --d-accent: #E9A1C4; --d-muted: #CDB9C3; --d-rule: #45343D; --d-card: #30242B; } [data-season="summer"] { --l-bg: #F4F9F9; --l-ink: #10232B; --l-accent: #0F6A86; --l-muted: #4B6570; --l-rule: #D5E4E7; --l-soft: #E0EEF1; --l-chip: #BFD4D9; --d-bg: #0F2129; --d-ink: #EEF6F7; --d-accent: #F2B24A; --d-muted: #B5C8CD; --d-rule: #2A3F48; --d-card: #172D36; } [data-season="autumn"] { --l-bg: #FBF7F1; --l-ink: #221E1A; --l-accent: #B4532A; --l-muted: #5B5249; --l-rule: #E2D7C8; --l-soft: #F1E6D6; --l-chip: #CFC3B3; --d-bg: #221E1A; --d-ink: #F6EFE4; --d-accent: #E0A43B; --d-muted: #CBBFAE; --d-rule: #423B34; --d-card: #2E2823; } [data-season="winter"] { --l-bg: #F2F4F7; --l-ink: #141A24; --l-accent: #2F4C7A; --l-muted: #4E586A; --l-rule: #D6DCE5; --l-soft: #E1E6EE; --l-chip: #C2CAD6; --d-bg: #131A24; --d-ink: #EEF2F7; --d-accent: #9FC3E8; --d-muted: #B3BECD; --d-rule: #2E3A4B; --d-card: #1B2432; } /* 2. Scopes ------------------------------------------------------------------- Components only use the semantic tokens below (--bg, --ink, --accent…). Wrapping a block in .scope-dark / .scope-light / .scope-paper re-themes it. */ .scope-light { --bg: var(--l-bg); --ink: var(--l-ink); --accent: var(--l-accent); --muted: var(--l-muted); --rule: var(--l-rule); --soft: var(--l-soft); --card: #FFFFFF; --chip: var(--l-chip); --on-accent: #FFFFFF; --map-land: var(--l-soft); --map-water: #BCD3DF; --map-label: #4B6570; color: var(--ink); } .scope-dark { --bg: var(--d-bg); --ink: var(--d-ink); --accent: var(--d-accent); --muted: var(--d-muted); --rule: var(--d-rule); --soft: var(--d-card); --card: var(--d-card); --chip: var(--d-rule); --on-accent: var(--d-bg); --map-land: var(--d-card); --map-water: var(--d-rule); --map-label: var(--d-muted); background: var(--bg); color: var(--ink); } /* White partner/product cards: always light, whatever the page mode. */ .scope-paper { --bg: #FFFFFF; --ink: var(--l-ink); --accent: var(--l-accent); --muted: var(--l-muted); --rule: var(--l-rule); --soft: var(--l-soft); --card: #FFFFFF; --on-accent: #FFFFFF; background: #FFFFFF; color: var(--ink); } /* 3. Base --------------------------------------------------------------------- */ :root { --serif: 'Young Serif', Georgia, serif; --sans: Figtree, system-ui, sans-serif; --gutter: 80px; --page-max: 1440px; --section-gap: 72px; --grid-gap: 32px; --overlay: rgba(20, 16, 12, 0.5); --hero-scrim: #112129; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; background: #FFFFFF; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } h1, h2, h3, p, figure, dl, dd { margin: 0; } button { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1:focus { outline: none; } /* FocusOnNavigate moves focus to the H1 */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 4. Layout ------------------------------------------------------------------- */ .site { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); } .site > main { flex: 1 0 auto; } .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-top: var(--section-gap); } .section-lg { padding-top: 80px; } .stack { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-32 { gap: 32px; } .gap-56 { gap: 56px; } .gap-64 { gap: 64px; } /* 12-column grid. Combine .at-N (start column) with .span-N. */ .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); } .grid-12.align-start { align-items: start; } .grid-12.align-center { align-items: center; } .grid-12.align-end { align-items: end; } .span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; } .span-9 { grid-column-end: span 9; } .span-12 { grid-column-end: span 12; } .at-5 { grid-column-start: 5; } .at-6 { grid-column-start: 6; } .at-7 { grid-column-start: 7; } .at-8 { grid-column-start: 8; } .at-9 { grid-column-start: 9; } /* Equal card grids. */ .cols-2, .cols-3, .cols-4 { display: grid; gap: 24px; } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Home runs on a looser vertical rhythm. */ .home { --section-gap: 88px; } /* Main + aside body (T05, T08). */ .with-aside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; } .with-aside > .main-col { grid-column: span 8; } .with-aside > .aside-col { grid-column: 9 / span 4; } /* 5. Type --------------------------------------------------------------------- */ .serif { font-family: var(--serif); font-weight: 400; } .h1 { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 1.05; letter-spacing: -1px; } .h2 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.15; } .h2.xl { font-size: 48px; } .h2.lg { font-size: 44px; } .h2.md { font-size: 38px; } .h2.sm { font-size: 34px; } .h3 { font-size: 21px; font-weight: 700; } .lead { font-size: 20px; line-height: 1.5; color: var(--muted); } .body { font-size: 17px; line-height: 1.65; color: var(--muted); } .muted { color: var(--muted); } .accent { color: var(--accent); } .small { font-size: 13px; } .xsmall { font-size: 12px; } .strong { font-weight: 700; } .nowrap { white-space: nowrap; } .kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } .kicker.sm { font-size: 12px; letter-spacing: 1px; } .kicker.lg { font-size: 14px; } .kicker.xl { font-size: 15px; } .kicker.plain { color: inherit; } .kicker.quiet { color: var(--muted); } .text-link { font-weight: 700; color: var(--accent); } /* 6. Atoms -------------------------------------------------------------------- */ /* Pill buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; border: 1px solid transparent; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn.sm { height: 40px; padding: 0 16px; font-size: 14px; } .btn.md { height: 44px; padding: 0 18px; font-size: 14px; } .btn.lg { height: 56px; padding: 0 28px; font-size: 16px; } .btn.block { width: 100%; } .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-ink { background: var(--ink); color: var(--bg); } .btn-white { background: #FFFFFF; color: #221E1A; } .btn-outline { border-color: currentColor; background: transparent; } /* Small uppercase badges */ .tag { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 10px; line-height: 1.2; white-space: nowrap; } .tag-accent { background: var(--accent); color: var(--on-accent); } .tag-outline { border: 1px solid currentColor; } .tag-white { background: #FFFFFF; color: #221E1A; } .tag-soft { background: var(--soft); } /* Rounded images */ .img-cover { width: 100%; object-fit: cover; display: block; } .r-12 { border-radius: 12px; } .r-14 { border-radius: 14px; } .r-16 { border-radius: 16px; } .r-18 { border-radius: 18px; } .r-20 { border-radius: 20px; } .r-22 { border-radius: 22px; } /* Boxes */ .panel-soft { background: var(--soft); border-radius: 20px; } .panel-line { border: 1px solid var(--rule); border-radius: 18px; } /* Round number / letter badges */ .badge-round { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 700; } /* Responsive ------------------------------------------------------------------ */ @media (max-width: 1199px) { :root { --gutter: 40px; --grid-gap: 24px; --section-gap: 56px; } .home { --section-gap: 64px; } .h1 { font-size: 48px; } .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { :root { --gutter: 16px; --section-gap: 32px; } .home { --section-gap: 40px; } .grid-12 > *, .with-aside > * { grid-column: 1 / -1 !important; } .grid-12, .with-aside { row-gap: 24px; } .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cols-4.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section-lg { padding-top: 32px; } .h1 { font-size: 32px; line-height: 1.1; letter-spacing: 0; } .h2, .h2.xl, .h2.lg, .h2.md, .h2.sm { font-size: 26px; } .lead { font-size: 16px; } .body { font-size: 16px; } /* Long localized CTAs stay within their containing card/section. */ .btn { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; height: auto; min-height: 48px; padding-block: 12px; } .btn.sm { height: auto; min-height: 40px; } .btn.md { height: auto; min-height: 44px; } .btn.lg { height: auto; min-height: 56px; } .gap-56, .gap-64 { gap: 32px; } /* Keep the footer clear of the T05 sticky booking bar. */ .site:has(.sticky-cta) { padding-bottom: calc(var(--sticky-booking-height, 0px) + 16px); } } /* Blazor error bar -------------------------------------------------------------- */ /* Editorial HTML (Prose, ProductSection):

,

,