/* ========================================================= theme-apple.css — ConstruBIM "Apple-like" theme Put this file at: /css/theme-apple.css In every page , add (LAST, after bootstrap/main.css): ========================================================= */ /* ======================= Variables + Reset ======================= */ :root{ --bg:#ffffff; --ink:#111111; --muted:#6e6e73; --line:rgba(0,0,0,.10); --card:rgba(255,255,255,.88); --shadow:0 20px 60px rgba(0,0,0,.08); --radius:24px; /* Fluid type scale (Apple-ish) */ --h1: clamp(40px, 6.2vw, 56px); --h2: clamp(28px, 4.2vw, 34px); --h3: clamp(18px, 2.6vw, 20px); --lead: clamp(16px, 2.1vw, 18px); --small: 13px; /* Rhythm */ --hero-pad-y: clamp(46px, 7vw, 72px); --section-pad-y: clamp(44px, 6.5vw, 72px); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust: 100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; color:var(--ink); background:var(--bg); line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern"; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } img{ max-width:100%; height:auto; display:block; } /* Make Bootstrap not force weird colors */ p, li{ color: inherit; } /* ======================= Layout helpers ======================= */ .wrap{ max-width:1100px; margin:0 auto; padding:0 16px; } section{ padding: var(--section-pad-y) 0; } /* Constrain long lines like Apple */ .hero p, .section-head p, .card p{ max-width:62ch; } /* ======================= Nav (Apple-ish) ======================= */ .nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.08); } .nav-inner{ max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-0.2px; text-decoration:none; color:var(--ink); white-space:nowrap; font-size:18px; } .brand-badge{ width:22px;height:22px; border-radius:7px; background:linear-gradient(135deg,#111,#444); box-shadow:0 8px 20px rgba(0,0,0,.15); } .nav-links{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .nav-links a{ font-size:13px; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:999px; transition:background .15s ease, color .15s ease; } .nav-links a:hover{ background:rgba(0,0,0,.06); color:var(--ink); } /* ======================= Buttons ======================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 18px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid rgba(0,0,0,.12); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; color:var(--ink); background:#fff; } .btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.08); } .btn.primary{ background:#111; color:#fff; border-color:#111; } .btn.primary:hover{ background:#000; border-color:#000; } /* ======================= Hero ======================= */ .hero{ padding: var(--hero-pad-y) 0 calc(var(--hero-pad-y) - 14px); background: radial-gradient(900px 520px at 30% 15%, rgba(0,0,0,.06), transparent 55%), radial-gradient(900px 520px at 70% 15%, rgba(0,0,0,.05), transparent 55%), linear-gradient(#fff, #fafafa); border-bottom:1px solid rgba(0,0,0,.06); } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; } .eyebrow{ font-size: var(--small); color:var(--muted); font-weight:600; letter-spacing:.2px; margin:0 0 10px; } .hero h1{ margin:0; font-size:var(--h1); line-height:1.03; letter-spacing:-0.6px; } .hero p{ margin:14px 0 0; font-size:var(--lead); color:var(--muted); line-height:1.45; } .hero-actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .hero-media{ border-radius:var(--radius); border:1px solid rgba(0,0,0,.08); background: radial-gradient(700px 420px at 30% 30%, rgba(0,0,0,.08), transparent 60%), linear-gradient(135deg, rgba(0,0,0,.02), rgba(0,0,0,.06)); box-shadow:var(--shadow); overflow:hidden; position:relative; min-height:320px; } .hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.92; mix-blend-mode:multiply; filter:contrast(1.03) saturate(1.03); } .hero-media .tag{ position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:8px 10px; font-size:12px; color:var(--muted); } /* ======================= Feature strip / Pills ======================= */ .strip{ padding:18px 0; border-bottom:1px solid rgba(0,0,0,.06); background:#fff; } .strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .pill{ border:1px solid rgba(0,0,0,.10); border-radius:999px; padding:12px 12px; background:rgba(255,255,255,.85); display:flex; gap:10px; align-items:flex-start; min-height:56px; } .dot{ width:10px;height:10px; border-radius:999px; background:#111; margin-top:4px; box-shadow:0 8px 20px rgba(0,0,0,.15); flex:0 0 auto; } .pill b{ font-size:13px; display:block; } .pill span{ font-size:12px; color:var(--muted); display:block; margin-top:2px; } /* ======================= Section Head + Cards ======================= */ .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; } .section-head h2{ margin:0; font-size:var(--h2); letter-spacing:-0.4px; line-height:1.12; } .section-head p{ margin:0; color:var(--muted); font-size:14px; } .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .card{ border-radius:var(--radius); border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.88); box-shadow:0 14px 40px rgba(0,0,0,.06); padding:18px; } .card h3{ margin:0 0 8px; font-size:var(--h3); letter-spacing:-0.2px; line-height:1.15; } .card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.45; } /* ======================= Media blocks / Video tiles ======================= */ .video-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start; } .video-tile{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(0,0,0,.08); background:#000; box-shadow:var(--shadow); position:relative; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } .video-tile:hover{ transform:translateY(-2px); box-shadow:0 26px 70px rgba(0,0,0,.14); } .video-tile img{ width:100%; height:100%; object-fit:cover; opacity:.92; } .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .play span{ width:64px;height:64px; border-radius:999px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.30); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 60px rgba(0,0,0,.35); } .play svg{ width:22px;height:22px; fill:#fff; transform:translateX(2px); } .mini-videos{ display:grid; grid-template-columns:1fr; gap:16px; } .big-video{ min-height:420px; } .mini-videos .video-tile{ min-height:180px; } /* Two-column content */ .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center; } .photo{ border-radius:var(--radius); border:1px solid rgba(0,0,0,.08); background:linear-gradient(135deg, rgba(0,0,0,.02), rgba(0,0,0,.06)); overflow:hidden; box-shadow:var(--shadow); min-height:340px; } .photo img{ width:100%; height:100%; object-fit:cover; } /* ======================= Video popup ======================= */ .popup{ position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:18px; z-index:9999; } .popup-inner{ width:100%; max-width:980px; position:relative; } .popup video{ width:100%; max-height:80vh; border-radius:18px; background:#000; outline:none; border:1px solid rgba(255,255,255,.14); box-shadow:0 26px 90px rgba(0,0,0,.40); } .close{ position:absolute; top:-46px; right:0; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:999px; padding:10px 12px; font-weight:600; font-size:13px; cursor:pointer; user-select:none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ======================= WhatsApp floating ======================= */ .whatsapp{ position:fixed; right:18px; bottom:18px; z-index:100; width:56px;height:56px;border-radius:999px; background:#25D366; box-shadow:0 18px 60px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; text-decoration:none; } .whatsapp svg{ width:24px;height:24px; fill:#fff; } /* ======================= Footer ======================= */ footer{ padding:28px 0; border-top:1px solid rgba(0,0,0,.08); background:#fff; color:var(--muted); font-size:13px; } .foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .foot b{ color:var(--ink); } /* ======================= Responsive ======================= */ @media (max-width: 950px){ .hero-grid{ grid-template-columns:1fr; } .strip-grid{ grid-template-columns:repeat(2,1fr); } .cards{ grid-template-columns:1fr; } .video-grid{ grid-template-columns:1fr; } .two{ grid-template-columns:1fr; } } @media (max-width: 800px){ .nav-links{ display:none !important; } .nav-inner{ justify-content:space-between; } } @media (max-width: 520px){ .big-video{ min-height:320px; } .pill{ padding:10px 12px; min-height:52px; } .whatsapp{ width:52px; height:52px; right:14px; bottom:14px; } }