/* ============================================================================ style.css — Rajan Sareen & Associates Architecture & Design firm website TABLE OF CONTENTS ───────────────── 1. CSS Custom Properties (design tokens) 2. CSS Reset & base html/body 3. Custom Cursor 4. Primary Navigation 5. Hero Section 6. Ticker / Marquee strip 7. About Section 8. Services Section 9. Projects Section 10. Contact Section 11. Footer 12. Scroll-reveal utility classes 13. Keyframe animations ============================================================================ */ /* ============================================================================ 1. CSS CUSTOM PROPERTIES (design tokens) Define all brand colours and recurring values in one place so they can be updated globally from here. Usage: var(--token-name) ============================================================================ */ :root { /* Brand colours */ --orange: #E8611A; /* Primary accent — buttons, highlights */ --orange-dark: #C44E12; /* Darker orange for hover states */ --black: #0C0C0C; /* True background colour */ --off-black: #111111; /* Slightly lighter bg for sections */ --white: #F6F3EF; /* Warm off-white for body text */ /* Opacity utilities */ --muted: rgba(246, 243, 239, 0.45); /* Dimmed body copy / subtext */ --border: rgba(246, 243, 239, 0.08); /* Hairline borders between elements */ } /* ============================================================================ 2. CSS RESET & BASE Minimal reset + global box-sizing. Smooth scroll is set on so anchor links (#about, #projects, etc.) animate instead of jumping. ============================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Smooth anchor scroll — used by all nav links and CTAs */ html { scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; /* Prevent horizontal scroll from ticker animation */ cursor: none; /* Hide the OS cursor — replaced by custom cursor */ } /* ============================================================================ 3. CUSTOM CURSOR Two elements work together: • .cursor → small filled orange dot (tracks mouse exactly) • .cursor-ring → larger hollow ring (slightly lags for easing effect) Both are positioned via JS (script.js) using left/top. Scale & opacity changes on interactive elements are also handled in JS. ============================================================================ */ .cursor { position: fixed; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; pointer-events: none; /* Never block clicks */ z-index: 9999; /* Always on top of everything */ transition: transform 0.15s, width 0.3s, height 0.3s; transform: translate(-50%, -50%); /* Centre on mouse coords */ } .cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(232, 97, 26, 0.4); border-radius: 50%; pointer-events: none; z-index: 9998; /* One layer below the dot */ transform: translate(-50%, -50%); /* left/top transition gives the ring its "lagging" feel */ transition: left 0.12s ease-out, top 0.12s ease-out, width 0.3s, height 0.3s, opacity 0.3s; } /* ============================================================================ 4. PRIMARY NAVIGATION Fixed to the viewport top. Always solid black — consistent across all sections. A hairline bottom border is added once the user scrolls past 50 px (class .scrolled added via JS) to visually separate the nav from the content below. ============================================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 5rem; z-index: 100; /* Sits above all page content */ background: var(--black); /* Always solid black — never transparent */ border-bottom: 0.5px solid var(--border); /* Subtle separator, always visible */ transition: padding 0.4s; /* Smooth compact on scroll */ } /* JS adds this class on scroll — only tightens the padding, bg is already set */ nav.scrolled { padding: 1.1rem 5rem; /* Slightly more compact when the user has scrolled */ } /* ── Logo / wordmark ─────────────────────────────────────────────────────── */ .logo { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); text-decoration: none; line-height: 1.3; } /* Ampersand is coloured orange to add a brand accent */ .logo span { color: var(--orange); } /* Tagline rendered as a smaller line below the firm name */ .logo small { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.55rem; letter-spacing: 0.25em; color: var(--muted); font-weight: 300; text-transform: uppercase; margin-top: 2px; } /* ── Nav link list ───────────────────────────────────────────────────────── */ .nav-links { display: flex; gap: 2.8rem; list-style: none; } .nav-links a { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 243, 239, 0.55); text-decoration: none; transition: color 0.25s; position: relative; /* Needed for the ::after underline pseudo-element */ } /* Animated underline that grows from left to right on hover */ .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .nav-links a:hover { color: var(--white); } .nav-links a:hover::after { transform: scaleX(1); } /* ── "Contact" CTA link (outlined button variant) ────────────────────────── */ .nav-cta { padding: 0.6rem 1.4rem; border: 0.5px solid rgba(232, 97, 26, 0.5); color: var(--orange) !important; /* Override the muted colour above */ font-size: 0.65rem !important; } .nav-cta:hover { background: var(--orange); color: var(--white) !important; } .nav-cta::after { display: none; } /* Remove the underline on this one */ /* ============================================================================ 5. HERO SECTION (#home) Full-viewport height section. Content flows from the top, pushed down by padding-top so it clears the fixed nav bar (~90px tall). Three decorative layers (grid, vignette, circle) sit behind the content. ============================================================================ */ #home { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; /* Content anchors to the top, below the nav */ padding: 9rem 5rem 7rem; /* top: clears the fixed nav; sides + bottom as before */ position: relative; overflow: hidden; } /* ── Decorative: subtle orange grid lines in the background ──────────────── */ .hero-grid { position: absolute; inset: 0; /* top/right/bottom/left: 0 shorthand */ background-image: linear-gradient(rgba(232, 97, 26, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 97, 26, 0.04) 1px, transparent 1px); background-size: 80px 80px; } /* ── Decorative: radial gradient vignette to pull focus to the centre-left ─ */ .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 50%, transparent 30%, rgba(12, 12, 12, 0.7) 100%); } /* ── Decorative: three concentric rotating circles (top-right ornament) ──── */ .hero-circle { position: absolute; top: 12%; right: 5%; width: 420px; height: 420px; border: 0.5px solid rgba(232, 97, 26, 0.12); border-radius: 50%; animation: spin 50s linear infinite; /* Very slow rotation */ } /* Middle ring */ .hero-circle::before { content: ''; position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; border: 0.5px solid rgba(232, 97, 26, 0.07); border-radius: 50%; } /* Inner ring */ .hero-circle::after { content: ''; position: absolute; top: 110px; left: 110px; right: 110px; bottom: 110px; border: 0.5px solid rgba(232, 97, 26, 0.05); border-radius: 50%; } /* ── Main hero headline ───────────────────────────────────────────────────── */ .hero-h1 { font-family: 'Cormorant Garamond', serif; /* clamp(min, preferred, max) — fluid typography that scales with viewport */ font-size: clamp(3.5rem, 7.5vw, 7rem); font-weight: 300; line-height: 1.02; max-width: 850px; /* Animates in first — slight delay so the page has painted */ opacity: 0; animation: up 0.9s 0.3s forwards; } /* Italic + orange for the key words ("purpose", "last") */ .hero-h1 em { font-style: italic; color: var(--orange); } /* Second line is offset right for a staggered typographic look */ .hero-h1 .line2 { display: block; padding-left: 6rem; } /* ── Hero eyebrow tag ─────────────────────────────────────────────────────── */ /* Sits below the headline — animates in just after the h1 */ .hero-tag { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--orange); margin-top: 1.8rem; /* Space from the h1 above it */ margin-bottom: 0; /* Animates in second, after the headline */ opacity: 0; animation: up 0.9s 0.5s forwards; display: flex; align-items: center; gap: 1rem; } /* Short orange line to the left of the eyebrow text */ .hero-tag::before { content: ''; display: block; width: 32px; height: 1px; background: var(--orange); } /* ── Bottom row: sub-copy + CTA buttons ─────────────────────────────────── */ /* margin-top: auto pushes this row to the bottom of the flex column, so the headline sits at the top and the CTAs anchor at the bottom */ .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; /* Pushes to bottom of the flex container */ padding-top: 3rem; /* Minimum breathing room above if the viewport is short */ opacity: 0; animation: up 0.9s 0.7s forwards; } .hero-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.9; max-width: 380px; } .hero-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-end; } /* ── Reusable button styles ──────────────────────────────────────────────── */ /* Solid orange primary button */ .btn-primary { padding: 1rem 2.5rem; background: var(--orange); color: var(--white); text-decoration: none; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; transition: background 0.25s, transform 0.2s; display: inline-block; } .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); } /* Transparent ghost button with a subtle border */ .btn-ghost { padding: 1rem 2.5rem; border: 0.5px solid rgba(246, 243, 239, 0.2); color: rgba(246, 243, 239, 0.6); text-decoration: none; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; transition: border-color 0.25s, color 0.25s; display: inline-block; } .btn-ghost:hover { border-color: var(--orange); color: var(--orange); } /* ============================================================================ 6. TICKER / MARQUEE STRIP Full-width orange band below the hero. The inner track is duplicated in HTML so the animation can loop seamlessly: when the first copy exits left, the second copy (which is already following) takes its place. ============================================================================ */ .ticker { background: var(--orange); padding: 0.9rem 0; overflow: hidden; white-space: nowrap; /* Keep everything on one line */ } .ticker-track { display: inline-block; animation: ticker 20s linear infinite; } /* Individual keyword items inside the ticker */ .ticker-track span { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(12, 12, 12, 0.7); /* Dark text on orange background */ margin: 0 2.5rem; } /* Dot separator between keywords — slightly lighter than the text */ .ticker-track span.dot { color: rgba(12, 12, 12, 0.4); margin: 0; } /* ============================================================================ 7. ABOUT SECTION (#about) Two-column grid: text content on the left, SVG blueprint + stats on the right. ============================================================================ */ #about { padding: 9rem 5rem; display: grid; grid-template-columns: 1fr 1.1fr; /* Right column slightly wider */ gap: 8rem; align-items: center; } /* ── Shared "section eyebrow" label (used across multiple sections) ───────── */ .section-eyebrow { font-size: 0.63rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; } /* Orange tick line before the eyebrow text */ .section-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--orange); } /* ── Shared section heading style ────────────────────────────────────────── */ .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.2; max-width: 580px; } .section-title em { font-style: italic; color: var(--orange); } /* ── About left column ───────────────────────────────────────────────────── */ .about-body { font-size: 0.85rem; color: var(--muted); line-height: 2; margin-top: 2rem; } /* Thin horizontal rule used as a visual divider between heading and body */ .about-rule { width: 40px; height: 1px; background: var(--orange); margin: 2rem 0; } /* 2×2 grid of firm values — separated by 1px hairline borders */ .about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; /* gap + background colour = the border lines */ background: var(--border); margin-top: 2.5rem; } .val { background: var(--black); padding: 1.5rem; transition: background 0.3s; } .val:hover { background: rgba(232, 97, 26, 0.05); } .val-name { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--white); } .val-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.7; } /* ── About right column ──────────────────────────────────────────────────── */ .about-right { position: relative; } /* Container / frame for the SVG blueprint illustration */ .blueprint { width: 100%; border: 0.5px solid rgba(232, 97, 26, 0.12); padding: 2rem; background: rgba(232, 97, 26, 0.02); } /* ── Stats row (Years / Projects / Disciplines) ──────────────────────────── */ .stats-row { display: flex; gap: 0; margin-top: 1.5rem; border: 0.5px solid var(--border); } .stat { flex: 1; padding: 1.5rem; border-right: 0.5px solid var(--border); /* Divider between stats */ text-align: center; } .stat:last-child { border-right: none; } /* Remove trailing divider */ /* Large orange number */ .stat-n { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; color: var(--orange); line-height: 1; } /* Small uppercase label below the number */ .stat-l { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; } /* ============================================================================ 8. SERVICES SECTION (#services) Three equal service cards in a grid, separated by hairline borders. A coloured bar slides in from the left at the card's bottom edge on hover. ============================================================================ */ #services { padding: 9rem 5rem; background: var(--off-black); /* Slightly lighter than hero/about sections */ border-top: 0.5px solid var(--border); } .services-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5rem; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; /* Combined with background → hairline borders */ background: var(--border); } .svc { background: var(--off-black); padding: 3rem 2.2rem; transition: background 0.3s; position: relative; overflow: hidden; /* Clip the ::before bar so it doesn't overflow */ } /* Orange underline bar that slides in from the left on hover */ .svc::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; } .svc:hover { background: rgba(232, 97, 26, 0.04); } .svc:hover::before { transform: scaleX(1); } /* Very large, very faint number in the background of each card */ .svc-num { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 300; color: rgba(246, 243, 239, 0.04); /* Nearly invisible */ line-height: 1; margin-bottom: 2rem; } .svc-name { font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 1rem; } .svc-desc { font-size: 0.77rem; color: var(--muted); line-height: 1.85; } /* ============================================================================ 9. PROJECTS SECTION (#projects) 10 project cards in a 3-column grid. Cards contain a faint large number, a project type tag, the project name, and location. An arrow appears on hover with a slide-in transition. ============================================================================ */ #projects { padding: 9rem 5rem; border-top: 0.5px solid var(--border); } .projects-head { margin-bottom: 4rem; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); } .proj { background: var(--black); padding: 2.8rem 2.2rem; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; /* Content anchors to the card's bottom */ position: relative; overflow: hidden; transition: background 0.35s; } .proj:hover { background: rgba(232, 97, 26, 0.05); } /* Large faint project number (top-right corner of each card) */ .proj-num { position: absolute; top: 1.5rem; right: 1.5rem; font-family: 'Cormorant Garamond', serif; font-size: 5rem; font-weight: 300; color: rgba(246, 243, 239, 0.04); line-height: 1; } /* Small orange category label above the project name */ .proj-type { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.5rem; } /* Project name — editorial serif at a comfortable size */ .proj-name { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 300; line-height: 1.3; } /* Muted location text below the name */ .proj-loc { font-size: 0.72rem; color: var(--muted); margin-top: 0.4rem; } /* Arrow that slides in from the left on hover (top-left corner) */ .proj-arrow { position: absolute; top: 1.8rem; left: 2.2rem; font-size: 0.7rem; color: var(--orange); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; } .proj:hover .proj-arrow { opacity: 1; transform: translateX(0); } /* ============================================================================ 10. CONTACT SECTION (#contact) Two-column layout: left = contact details; right = enquiry form. Form fields share the same 1px gap + background trick as the service cards. ============================================================================ */ #contact { padding: 9rem 5rem; background: var(--off-black); border-top: 0.5px solid var(--border); } .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8rem; align-items: start; } /* Vertical stack of contact info items (address, phone, web, hours) */ .contact-info { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 3rem; font-style: normal; /* Reset
italic default */ } /* Small uppercase label above each contact value */ .ci-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.4rem; } /* The actual contact value (address text, phone number, etc.) */ .ci-val { font-size: 0.88rem; color: var(--white); line-height: 1.7; } .ci-val a { color: var(--white); text-decoration: none; transition: color 0.2s; } .ci-val a:hover { color: var(--orange); } /* ── Enquiry form ────────────────────────────────────────────────────────── */ /* Flex column with 1px gaps — same hairline border technique as the grids */ .contact-form { display: flex; flex-direction: column; gap: 1px; background: var(--border); } /* Shared style for all form inputs, selects, and the textarea */ .cf { background: var(--off-black); border: none; outline: none; padding: 1.2rem 1.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 300; color: var(--white); width: 100%; transition: background 0.2s; } .cf::placeholder { color: rgba(246, 243, 239, 0.3); } .cf:focus { background: rgba(232, 97, 26, 0.06); } textarea.cf { resize: none; height: 130px; } /* Submit button — shares .cf sizing; JS handles loading / success state */ .cf-submit { background: var(--orange); color: var(--white); border: none; padding: 1.2rem 1.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: none; /* Keep custom cursor */ text-align: left; /* Arrow "→" sits to the right of text naturally */ transition: background 0.25s; } .cf-submit:hover { background: var(--orange-dark); } /* ============================================================================ 11. FOOTER Three-column grid: brand wordmark | address | social links + copyright ============================================================================ */ footer { padding: 2.5rem 5rem; border-top: 0.5px solid var(--border); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 2rem; } /* Footer wordmark — same typeface as nav logo */ .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; } .footer-logo span { color: var(--orange); } /* Condensed address block (centred column) */ .footer-address { font-size: 0.72rem; color: var(--muted); line-height: 1.8; text-align: center; font-style: normal; /* Reset
italic */ } /* Right column wrapper (social links stacked above copyright) */ .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 243, 239, 0.3); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--orange); } .footer-copy { font-size: 0.65rem; color: rgba(246, 243, 239, 0.2); } /* ============================================================================ 12. SCROLL-REVEAL UTILITY CLASSES Elements with .reveal start hidden and slide up into view when they enter the viewport (IntersectionObserver in script.js adds the .in class). .reveal-delay and .reveal-delay2 stagger siblings within the same section. ============================================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s, transform 0.8s; } /* JS adds this class once the element passes the observer threshold */ .reveal.in { opacity: 1; transform: none; } /* Stagger siblings: delay the second element by 150 ms */ .reveal-delay { transition-delay: 0.15s; } /* Stagger siblings: delay the third element by 300 ms */ .reveal-delay2 { transition-delay: 0.30s; } /* ============================================================================ 13. KEYFRAME ANIMATIONS up → used for hero elements fading in on page load spin → used for the decorative concentric circles in the hero ticker → used for the horizontal marquee strip ============================================================================ */ /* Slide up + fade in — used for hero tag, headline, and bottom row */ @keyframes up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } /* Continuous clockwise rotation — used on .hero-circle */ @keyframes spin { to { transform: rotate(360deg); } } /* Continuous left-scroll — moves the ticker track by exactly 50% (half its total width, which equals one full copy of the content) */ @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }