Merge option 2 homepage and visual language into the site
Rebuild the homepage on option 2's sections and effects (3D DNA, spinning cube, giant words, fireworks journey, neon type, chrome ribbon) with copy kept verbatim from the content document. Each venture now has its own 3D object, the portfolio dashboard sits beside the DNA, the journey uses the original stats row and the playbook keeps our book. Inner pages adopt the same navy, glass and gradient skin, with dark as the default theme. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
+150
-35
@@ -33,8 +33,14 @@
|
||||
--code-num: #ffb38a;
|
||||
--code-dim: #8a8a8a;
|
||||
--shadow-color: rgba(0, 0, 0, 0.12);
|
||||
--bd: rgba(15, 23, 42, 0.08);
|
||||
--glass: rgba(255, 255, 255, 0.7);
|
||||
--glow: rgba(26, 127, 255, 0.10);
|
||||
--grid-line: rgba(15, 23, 42, 0.035);
|
||||
--grad-a: #0b1220; --grad-b: #13306b; --grad-c: #1a6fe0;
|
||||
--ice: #0870c4; --sky: #1a7fff;
|
||||
|
||||
--font-sans: "Inter", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-sans: "Inter Tight", "Inter", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
|
||||
--text-caption: 14px;
|
||||
@@ -65,48 +71,60 @@
|
||||
/* Dark theme: follows the system unless the visitor picks one with the toggle. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--accent: #33b9ff;
|
||||
--accent-press: #66cbff;
|
||||
--accent-soft: rgba(51, 185, 255, 0.14);
|
||||
--accent-glow: rgba(51, 185, 255, 0.35);
|
||||
--on-accent: #04121c;
|
||||
--accent: #1fb7ff;
|
||||
--accent-press: #5cc9ff;
|
||||
--accent-soft: rgba(31, 183, 255, 0.14);
|
||||
--accent-glow: rgba(31, 183, 255, 0.35);
|
||||
--on-accent: #04101c;
|
||||
--logo-blue: #33b9ff;
|
||||
--ink: #f2f2f3;
|
||||
--graphite: #d6d6d9;
|
||||
--slate: #a4a4aa;
|
||||
--smoke: #85858c;
|
||||
--ash: #9a9aa1;
|
||||
--mist: #26262b;
|
||||
--cloud: #141417;
|
||||
--porcelain: #0b0b0d;
|
||||
--surface-dark: #18181c;
|
||||
--surface-dark-2: #101013;
|
||||
--dark-line: #2c2c32;
|
||||
--nav-bg: rgba(11, 11, 13, 0.82);
|
||||
--ink: #f3f7ff;
|
||||
--graphite: #c3cde2;
|
||||
--slate: #8896b3;
|
||||
--smoke: #6c7894;
|
||||
--ash: #8896b3;
|
||||
--mist: rgba(255, 255, 255, 0.09);
|
||||
--cloud: rgba(255, 255, 255, 0.035);
|
||||
--porcelain: #04060c;
|
||||
--surface-dark: #0b1120;
|
||||
--surface-dark-2: #070b16;
|
||||
--dark-line: rgba(255, 255, 255, 0.1);
|
||||
--nav-bg: rgba(4, 6, 12, 0.66);
|
||||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||||
--bd: rgba(255, 255, 255, 0.09);
|
||||
--glass: rgba(255, 255, 255, 0.035);
|
||||
--glow: rgba(26, 127, 255, 0.10);
|
||||
--grid-line: rgba(255, 255, 255, 0.028);
|
||||
--grad-a: #ffffff; --grad-b: #a9dfff; --grad-c: #5aa8ff;
|
||||
--ice: #9fe6ff; --sky: #1fb7ff;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--accent: #33b9ff;
|
||||
--accent-press: #66cbff;
|
||||
--accent-soft: rgba(51, 185, 255, 0.14);
|
||||
--accent-glow: rgba(51, 185, 255, 0.35);
|
||||
--on-accent: #04121c;
|
||||
--accent: #1fb7ff;
|
||||
--accent-press: #5cc9ff;
|
||||
--accent-soft: rgba(31, 183, 255, 0.14);
|
||||
--accent-glow: rgba(31, 183, 255, 0.35);
|
||||
--on-accent: #04101c;
|
||||
--logo-blue: #33b9ff;
|
||||
--ink: #f2f2f3;
|
||||
--graphite: #d6d6d9;
|
||||
--slate: #a4a4aa;
|
||||
--smoke: #85858c;
|
||||
--ash: #9a9aa1;
|
||||
--mist: #26262b;
|
||||
--cloud: #141417;
|
||||
--porcelain: #0b0b0d;
|
||||
--surface-dark: #18181c;
|
||||
--surface-dark-2: #101013;
|
||||
--dark-line: #2c2c32;
|
||||
--nav-bg: rgba(11, 11, 13, 0.82);
|
||||
--ink: #f3f7ff;
|
||||
--graphite: #c3cde2;
|
||||
--slate: #8896b3;
|
||||
--smoke: #6c7894;
|
||||
--ash: #8896b3;
|
||||
--mist: rgba(255, 255, 255, 0.09);
|
||||
--cloud: rgba(255, 255, 255, 0.035);
|
||||
--porcelain: #04060c;
|
||||
--surface-dark: #0b1120;
|
||||
--surface-dark-2: #070b16;
|
||||
--dark-line: rgba(255, 255, 255, 0.1);
|
||||
--nav-bg: rgba(4, 6, 12, 0.66);
|
||||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||||
--bd: rgba(255, 255, 255, 0.09);
|
||||
--glass: rgba(255, 255, 255, 0.035);
|
||||
--glow: rgba(26, 127, 255, 0.10);
|
||||
--grid-line: rgba(255, 255, 255, 0.028);
|
||||
--grad-a: #ffffff; --grad-b: #a9dfff; --grad-c: #5aa8ff;
|
||||
--ice: #9fe6ff; --sky: #1fb7ff;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -779,6 +797,99 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
|
||||
.book { transform: none; }
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
Option 2 skin: navy canvas, neon-blue glow, glass cards, gradient type.
|
||||
Everything reads from tokens so the light theme keeps working.
|
||||
===================================================================== */
|
||||
.bgfx {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 8.3333vw 100%,
|
||||
radial-gradient(60% 40% at 50% 0%, var(--glow), transparent 70%);
|
||||
}
|
||||
main, .footer { position: relative; z-index: 2; }
|
||||
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #1a7fff, #9fe6ff); }
|
||||
|
||||
h1, h2, h3, h4 { font-weight: 600; }
|
||||
.h-display-lg, .h-display, .grad {
|
||||
font-weight: 500; letter-spacing: -0.045em; padding-bottom: 0.08em;
|
||||
background: linear-gradient(180deg, var(--grad-a) 20%, var(--grad-b) 75%, var(--grad-c));
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.h-display-lg { letter-spacing: -0.05em; line-height: 1.02; }
|
||||
.h-lg, .h-md, .h-sm { font-weight: 500; letter-spacing: -0.035em; }
|
||||
.band, .card-dark, .closing-dark, .plan-featured, .feature-press, .cal-card {
|
||||
--grad-a: #ffffff; --grad-b: #a9dfff; --grad-c: #5aa8ff; --bd: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Eyebrow becomes the glass pill */
|
||||
.eyebrow {
|
||||
align-self: flex-start; gap: 8px; padding: 6px 14px; border: 1px solid var(--bd); border-radius: 99px;
|
||||
background: var(--glass); color: var(--ice); font-size: 11.5px; letter-spacing: 0.08em;
|
||||
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
|
||||
}
|
||||
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 10px var(--sky); }
|
||||
.center .eyebrow, .sec-head-center .eyebrow, .closing-inner .eyebrow { align-self: center; }
|
||||
.band .eyebrow, .card-dark .eyebrow, .closing-dark .eyebrow { color: #9fe6ff; background: rgba(255, 255, 255, .04); }
|
||||
|
||||
/* Buttons: white key with a blue arrow tile, glass outline variant */
|
||||
.btn { border-radius: 12px; min-height: 48px; padding: 8px 8px 8px 20px; gap: 14px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; }
|
||||
.btn .go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #1a7fff; color: #fff; flex: none; transition: transform .25s ease; }
|
||||
.btn .go svg { width: 14px; height: 14px; }
|
||||
.btn:hover .go { transform: translateX(3px); }
|
||||
.btn:hover svg { transform: none; }
|
||||
.btn-primary { background: var(--ink); color: var(--porcelain); }
|
||||
.btn-primary:hover { background: var(--ink); box-shadow: 0 0 36px rgba(159, 230, 255, .35); }
|
||||
.btn-ghost, .btn-ghost-light { background: var(--glass); color: var(--ink); border-color: var(--bd); padding: 8px 20px; }
|
||||
.btn-ghost .go, .btn-ghost-light .go { display: none; }
|
||||
.btn-ghost:hover, .btn-ghost-light:hover { background: var(--glass); border-color: var(--sky); }
|
||||
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .03); }
|
||||
.btn-light { background: #fff; color: #06101f; }
|
||||
.btn-light:hover { background: #fff; box-shadow: 0 0 36px rgba(159, 230, 255, .35); }
|
||||
.btn-sm { min-height: 40px; padding: 5px 5px 5px 16px; font-size: 11.5px; }
|
||||
.btn-sm .go { width: 28px; height: 28px; }
|
||||
.text-link { color: var(--sky); }
|
||||
|
||||
/* Glass cards */
|
||||
.card, .showcase, .closing, .process-step, .plan, .venture, .tab-panel, .faq details, .cover, .topic, .signal, .industries, .direct { border: 1px solid var(--bd); }
|
||||
.card, .showcase, .closing, .process-step, .plan:not(.plan-featured), .venture, .tab-panel, .cover, .topic {
|
||||
background: linear-gradient(160deg, var(--glass), transparent 120%), var(--cloud);
|
||||
}
|
||||
.card, .process-step, .venture, .cover, .topic { overflow: hidden; }
|
||||
.card::after, .process-step::after, .cover::after, .topic::after {
|
||||
content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; pointer-events: none;
|
||||
background: radial-gradient(closest-side, var(--glow), transparent); opacity: 0; transition: opacity .4s ease;
|
||||
}
|
||||
.card:hover::after, .process-step:hover::after, .cover:hover::after, .topic:hover::after { opacity: 1; }
|
||||
.card:hover, .process-step:hover, .cover:hover, .topic:hover { border-color: rgba(31, 183, 255, .45); }
|
||||
.ic { border: 1px solid rgba(31, 183, 255, .35); background: radial-gradient(circle at 35% 30%, var(--accent-soft), transparent); box-shadow: 0 0 22px var(--glow); }
|
||||
.card .ic { background: radial-gradient(circle at 35% 30%, var(--accent-soft), transparent); }
|
||||
|
||||
/* Navigation: glass bar with a pill group, like option 2 */
|
||||
.nav { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
|
||||
.nav::before {
|
||||
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-bg);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
|
||||
border-bottom: 1px solid var(--bd);
|
||||
}
|
||||
.nav-links { gap: 2px; padding: 4px; border: 1px solid var(--bd); border-radius: 12px; background: var(--glass); }
|
||||
.nav-links a, .nav-links button { border-radius: 8px; padding: 8px 14px; font-size: 13.5px; color: var(--slate); }
|
||||
.nav-links a:hover, .nav-links button:hover, .nav-links li:focus-within > button { background: transparent; color: var(--ink); }
|
||||
.nav-links a[aria-current="page"], .nav-links .is-active > button { color: var(--ink); background: rgba(26, 127, 255, .22); }
|
||||
.dropdown { background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--bd); }
|
||||
:root[data-theme="dark"] .dropdown { background: rgba(10, 14, 26, .96); }
|
||||
.theme-btn, .menu-btn { border-radius: 10px; border-color: var(--bd); background: var(--glass); }
|
||||
|
||||
/* Real logo on dark, vector recreation on light */
|
||||
.logo-img { display: none; height: 30px; width: auto; }
|
||||
:root[data-theme="dark"] .brand .logo-img { display: block; }
|
||||
:root[data-theme="dark"] .brand .logo-mark, :root[data-theme="dark"] .brand .brand-word { display: none; }
|
||||
.footer .brand .logo-img { display: block; }
|
||||
.footer .brand .logo-mark, .footer .brand .brand-word { display: none; }
|
||||
|
||||
.footer { border-top: 1px solid var(--bd); }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 1100px) {
|
||||
.nav-links { display: none; }
|
||||
@@ -873,3 +984,7 @@ html:not(.js) .tabs { grid-template-columns: 1fr; }
|
||||
.foot-col:last-child { grid-column: 1 / -1; }
|
||||
.btn { white-space: normal; text-align: center; }
|
||||
}
|
||||
|
||||
/* Option 2 skin: small fixes */
|
||||
.band .showcase { border: 0; background: transparent; }
|
||||
.plan-featured { outline: 1px solid rgba(31, 183, 255, .45); box-shadow: 0 0 50px rgba(26, 127, 255, .18); }
|
||||
|
||||
Reference in New Issue
Block a user