/* ========================================================== SEMANTIC ENGINE Design System v1.0 ========================================================== */ /* ========================================================== ROOT VARIABLES ========================================================== */ :root{ /* ========= COLORS ========= */ --background:#eef4ef; --surface:#f8fbf8; --surface-light:#ffffff; --surface-dark:#e7ece8; --text:#1f2624; --text-soft:#5d6865; --line:#d8e2dd; --shadow:rgba(0,0,0,.08); /* ========= AURORA ========= */ --mint:#9ff5d4; --cyan:#8de8ff; --sky:#9fc9ff; --violet:#d8b6ff; --olive:#a4c58c; --amber:#ffd98a; --rose:#ffb9d8; /* ========= GLOW ========= */ --mint-glow:rgba(159,245,212,.45); --cyan-glow:rgba(141,232,255,.40); --violet-glow:rgba(216,182,255,.35); --olive-glow:rgba(164,197,140,.30); --amber-glow:rgba(255,217,138,.35); /* ========= TYPOGRAPHY ========= */ --title-font:"Cormorant Garamond",serif; --body-font:"IBM Plex Sans",sans-serif; --mono-font:"JetBrains Mono",monospace; /* ========= RADIUS ========= */ --radius-xs:8px; --radius-s:12px; --radius-m:18px; --radius-l:26px; --radius-xl:36px; /* ========= SPACING ========= */ --space-xs:.5rem; --space-s:.9rem; --space-m:1.4rem; --space-l:2rem; --space-xl:3rem; /* ========= TRANSITIONS ========= */ --fast:.18s; --normal:.35s; --slow:.7s; } /* ========================================================== RESET ========================================================== */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--body-font); background:var(--background); color:var(--text); overflow-x:hidden; min-height:100vh; line-height:1.6; } /* ========================================================== SELECTION ========================================================== */ ::selection{ background:var(--mint); color:#16312b; } /* ========================================================== SCROLLBAR ========================================================== */ ::-webkit-scrollbar{ width:11px; } ::-webkit-scrollbar-track{ background:#edf3ef; } ::-webkit-scrollbar-thumb{ background:linear-gradient( to bottom, var(--mint), var(--cyan), var(--violet) ); border-radius:999px; } /* ========================================================== LINKS ========================================================== */ a{ color:inherit; text-decoration:none; } /* ========================================================== BUTTON ========================================================== */ button{ border:none; cursor:pointer; background:none; font-family:inherit; transition:all var(--normal); } /* ========================================================== INPUT ========================================================== */ input{ font-family:inherit; outline:none; } /* ========================================================== IMAGES ========================================================== */ img{ display:block; max-width:100%; }/* ========================================================== BACKGROUND Aurora Archive Design Language ========================================================== */ body{ background: radial-gradient( circle at top left, rgba(159,245,212,.18), transparent 32% ), radial-gradient( circle at top right, rgba(141,232,255,.16), transparent 34% ), radial-gradient( circle at bottom right, rgba(216,182,255,.18), transparent 38% ), radial-gradient( circle at bottom left, rgba(255,217,138,.10), transparent 42% ), linear-gradient( 180deg, #f9fcfb, #eef4ef ); } /* ========================================================== APP ========================================================== */ #app{ position:relative; width:100%; min-height:100vh; overflow:hidden; } /* ========================================================== BACKGROUND LAYERS ========================================================== */ #background{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-100; } /* ========================================================== PAPER TEXTURE ========================================================== */ #paper-texture{ position:absolute; inset:0; opacity:.08; background-image: repeating-linear-gradient( 0deg, rgba(0,0,0,.018) 0px, rgba(0,0,0,.018) 1px, transparent 1px, transparent 4px ); } /* ========================================================== GRID ========================================================== */ #grid-overlay{ position:absolute; inset:0; opacity:.035; background-image: linear-gradient( rgba(40,60,55,.15) 1px, transparent 1px ), linear-gradient( 90deg, rgba(40,60,55,.15) 1px, transparent 1px ); background-size:40px 40px; } /* ========================================================== NOISE ========================================================== */ #noise-layer{ position:absolute; inset:0; opacity:.025; mix-blend-mode:multiply; } /* ========================================================== AURORA ========================================================== */ #light-overlay{ position:absolute; inset:-25%; filter:blur(140px); opacity:.65; animation:auroraFlow 28s ease-in-out infinite alternate; background: radial-gradient( circle, rgba(159,245,212,.55), transparent 40% ), radial-gradient( circle, rgba(141,232,255,.45), transparent 45% ), radial-gradient( circle, rgba(216,182,255,.40), transparent 42% ); } /* ========================================================== VIGNETTE ========================================================== */ #vignette{ position:absolute; inset:0; box-shadow: inset 0 0 220px rgba(0,0,0,.08); } /* ========================================================== AURORA ANIMATION ========================================================== */ @keyframes auroraFlow{ 0%{ transform: translate(-6%,-4%) rotate(0deg) scale(1); } 25%{ transform: translate(4%,3%) rotate(4deg) scale(1.06); } 50%{ transform: translate(-2%,7%) rotate(-3deg) scale(1.12); } 75%{ transform: translate(5%,-2%) rotate(2deg) scale(1.05); } 100%{ transform: translate(-4%,4%) rotate(-2deg) scale(1.1); } } /* ========================================================== APPLICATION WRAPPER ========================================================== */ #application-wrapper{ width:100%; min-height:100vh; display:flex; flex-direction:column; } /* ========================================================== GLOBAL HEADER ========================================================== */ #global-header{ position:sticky; top:0; z-index:500; width:100%; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; backdrop-filter:blur(24px); background:rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.55); box-shadow: 0 8px 40px rgba(0,0,0,.04); } /* ========================================================== HEADER ========================================================== */ #header-left{ display:flex; align-items:center; gap:18px; } #brand{ display:flex; flex-direction:column; } #brand-title{ font-family:var(--title-font); font-size:2rem; font-weight:600; letter-spacing:.03em; } #brand-subtitle{ color:var(--text-soft); font-size:.86rem; } /* ========================================================== SEARCH ========================================================== */ #header-center{ width:42%; } #global-search-wrapper{ width:100%; } #global-search{ width:100%; padding:15px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.68); backdrop-filter:blur(20px); transition:.35s; font-size:.95rem; } #global-search:focus{ border-color:var(--mint); box-shadow: 0 0 35px var(--mint-glow); } /* ========================================================== HEADER BUTTONS ========================================================== */ #header-right{ display:flex; align-items:center; gap:12px; } #header-right button{ padding:13px 18px; border-radius:16px; background:rgba(255,255,255,.65); backdrop-filter:blur(16px); transition:.35s; } #header-right button:hover{ transform:translateY(-2px); } /* ========================================================== MAIN ========================================================== */ #main-layout{ display:grid; grid-template-columns: 260px 1fr 340px; gap:28px; width:100%; padding:34px; } /* ========================================================== SIDEBARS ========================================================== */ #left-sidebar, #right-panel{ position:sticky; top:108px; height:calc(100vh - 140px); overflow:auto; } /* ========================================================== WORKSPACE ========================================================== */ #workspace{ display:flex; flex-direction:column; gap:34px; } /* ========================================================== CUSTOM SCROLL ========================================================== */ #left-sidebar::-webkit-scrollbar, #right-panel::-webkit-scrollbar{ width:7px; } #left-sidebar::-webkit-scrollbar-thumb, #right-panel::-webkit-scrollbar-thumb{ background:rgba(150,180,170,.35); border-radius:999px; } /* ========================================================== SPACING HELPERS ========================================================== */ .panel-header{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; } .panel-header h2{ font-size:1.7rem; font-family:var(--title-font); } .panel-header p{ color:var(--text-soft); max-width:650px; } /* ========================================================== APPLICATION WRAPPER ========================================================== */ #application-wrapper{ width:100%; min-height:100vh; display:flex; flex-direction:column; } /* ========================================================== GLOBAL HEADER ========================================================== */ #global-header{ position:sticky; top:0; z-index:500; width:100%; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; backdrop-filter:blur(24px); background:rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.55); box-shadow: 0 8px 40px rgba(0,0,0,.04); } /* ========================================================== HEADER ========================================================== */ #header-left{ display:flex; align-items:center; gap:18px; } #brand{ display:flex; flex-direction:column; } #brand-title{ font-family:var(--title-font); font-size:2rem; font-weight:600; letter-spacing:.03em; } #brand-subtitle{ color:var(--text-soft); font-size:.86rem; } /* ========================================================== SEARCH ========================================================== */ #header-center{ width:42%; } #global-search-wrapper{ width:100%; } #global-search{ width:100%; padding:15px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.68); backdrop-filter:blur(20px); transition:.35s; font-size:.95rem; } #global-search:focus{ border-color:var(--mint); box-shadow: 0 0 35px var(--mint-glow); } /* ========================================================== HEADER BUTTONS ========================================================== */ #header-right{ display:flex; align-items:center; gap:12px; } #header-right button{ padding:13px 18px; border-radius:16px; background:rgba(255,255,255,.65); backdrop-filter:blur(16px); transition:.35s; } #header-right button:hover{ transform:translateY(-2px); } /* ========================================================== MAIN ========================================================== */ #main-layout{ display:grid; grid-template-columns: 260px 1fr 340px; gap:28px; width:100%; padding:34px; } /* ========================================================== SIDEBARS ========================================================== */ #left-sidebar, #right-panel{ position:sticky; top:108px; height:calc(100vh - 140px); overflow:auto; } /* ========================================================== WORKSPACE ========================================================== */ #workspace{ display:flex; flex-direction:column; gap:34px; } /* ========================================================== CUSTOM SCROLL ========================================================== */ #left-sidebar::-webkit-scrollbar, #right-panel::-webkit-scrollbar{ width:7px; } #left-sidebar::-webkit-scrollbar-thumb, #right-panel::-webkit-scrollbar-thumb{ background:rgba(150,180,170,.35); border-radius:999px; } /* ========================================================== SPACING HELPERS ========================================================== */ .panel-header{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; } .panel-header h2{ font-size:1.7rem; font-family:var(--title-font); } .panel-header p{ color:var(--text-soft); max-width:650px; } /* ========================================================== GLOBAL DOCK ========================================================== */ #global-dock{ position:fixed; left:24px; top:50%; transform:translateY(-50%); width:92px; display:flex; flex-direction:column; gap:14px; padding:18px 12px; border-radius:32px; background: rgba(255,255,255,.55); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.45); box-shadow: 0 20px 60px rgba(0,0,0,.10), 0 0 50px rgba(141,232,255,.08); z-index:999; } /* ========================================================== DOCK ITEM ========================================================== */ .dock-item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 6px; border-radius:18px; transition: transform .28s ease, background .28s ease, box-shadow .28s ease; } /* ========================================================== ACTIVE ========================================================== */ .dock-item.active{ background: linear-gradient( 135deg, rgba(159,245,212,.26), rgba(141,232,255,.24) ); box-shadow: 0 0 24px rgba(159,245,212,.22); } /* ========================================================== HOVER ========================================================== */ .dock-item:hover{ transform: translateX(4px) scale(1.05); background: rgba(255,255,255,.72); } /* ========================================================== ICON ========================================================== */ .dock-icon{ width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; background: linear-gradient( 180deg, rgba(255,255,255,.85), rgba(235,245,241,.82) ); border:1px solid rgba(255,255,255,.75); transition:.35s; } /* ========================================================== ICON HOVER ========================================================== */ .dock-item:hover .dock-icon{ transform: rotate(-4deg) scale(1.08); } /* ========================================================== LABEL ========================================================== */ .dock-item span{ font-size:.72rem; text-align:center; line-height:1.25; color:var(--text-soft); transition:.3s; } /* ========================================================== LABEL ACTIVE ========================================================== */ .dock-item.active span{ color:var(--text); font-weight:600; } /* ========================================================== GLOW ========================================================== */ .dock-item::after{ content:""; position:absolute; inset:0; border-radius:18px; opacity:0; transition:.35s; background: radial-gradient( circle, rgba(159,245,212,.22), transparent 70% ); } .dock-item:hover::after{ opacity:1; } /* ========================================================== FLOATING ACTIONS ========================================================== */ #floating-actions{ position:fixed; right:28px; bottom:28px; display:flex; flex-direction:column; gap:14px; z-index:998; } .floating-action{ width:58px; height:58px; border-radius:18px; background: rgba(255,255,255,.70); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.60); transition:.3s; } .floating-action:hover{ transform: scale(1.08) rotate(-6deg); } /* ========================================================== TYPOGRAPHY SYSTEM ========================================================== */ /* ---------- Headings ---------- */ h1, h2, h3, h4, h5, h6{ margin:0; color:var(--text); font-family:var(--title-font); font-weight:600; letter-spacing:-.02em; line-height:1.15; } h1{ font-size:clamp(2.8rem,4vw,4.6rem); } h2{ font-size:clamp(2rem,2.8vw,3rem); } h3{ font-size:1.45rem; } h4{ font-size:1.2rem; } h5{ font-size:1rem; } h6{ font-size:.9rem; } /* ========================================================== BODY TEXT ========================================================== */ p{ color:var(--text-soft); font-size:.98rem; line-height:1.8; } /* ========================================================== SMALL TEXT ========================================================== */ small{ font-size:.78rem; color:var(--text-soft); opacity:.8; } /* ========================================================== LABELS ========================================================== */ label{ font-size:.88rem; font-weight:500; color:var(--text); } /* ========================================================== PANEL TITLES ========================================================== */ .panel-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; } .panel-title-group{ display:flex; flex-direction:column; gap:8px; } .panel-title-group p{ max-width:720px; } /* ========================================================== CARD TITLES ========================================================== */ .card-title{ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-family:var(--title-font); font-weight:600; } /* ========================================================== SECTION TITLE ========================================================== */ .section-title{ display:flex; flex-direction:column; gap:8px; margin-bottom:28px; } /* ========================================================== MONO TEXT ========================================================== */ code, pre, .mono{ font-family:var(--mono-font); } /* ========================================================== STATISTICS ========================================================== */ .stat-value{ font-family:var(--mono-font); font-size:2rem; font-weight:600; color:var(--text); } .stat-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-soft); } /* ========================================================== BADGES ========================================================== */ .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.55); font-size:.72rem; font-weight:600; } /* ========================================================== TAGS ========================================================== */ .tag{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; background:rgba(159,245,212,.12); border:1px solid rgba(159,245,212,.24); color:var(--text); font-size:.82rem; transition:.3s; } .tag:hover{ background:rgba(159,245,212,.22); } /* ========================================================== LINKS ========================================================== */ a{ transition:.3s; } a:hover{ color:var(--mint); } /* ========================================================== QUOTES ========================================================== */ blockquote{ padding-left:22px; border-left:4px solid var(--mint); color:var(--text-soft); font-style:italic; } /* ========================================================== SELECTION TITLES ========================================================== */ ::selection{ background:var(--mint); color:#17372d; } /* ========================================================== GLOW ENGINE ========================================================== */ /* ---------- Base Glow ---------- */ .glow{ position:relative; isolation:isolate; } .glow::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; opacity:0; transition: opacity .45s ease, transform .45s ease, filter .45s ease; filter:blur(28px); } .glow:hover::before{ opacity:1; transform:scale(1.015); } /* ========================================================== MINT ========================================================== */ .glow-mint::before{ background: radial-gradient( circle, rgba(159,245,212,.55), transparent 72% ); } /* ========================================================== CYAN ========================================================== */ .glow-cyan::before{ background: radial-gradient( circle, rgba(141,232,255,.52), transparent 72% ); } /* ========================================================== VIOLET ========================================================== */ .glow-violet::before{ background: radial-gradient( circle, rgba(216,182,255,.50), transparent 72% ); } /* ========================================================== OLIVE ========================================================== */ .glow-olive::before{ background: radial-gradient( circle, rgba(164,197,140,.48), transparent 72% ); } /* ========================================================== AMBER ========================================================== */ .glow-amber::before{ background: radial-gradient( circle, rgba(255,217,138,.50), transparent 72% ); } /* ========================================================== ROSE ========================================================== */ .glow-rose::before{ background: radial-gradient( circle, rgba(255,185,216,.52), transparent 72% ); } /* ========================================================== CARD SHADOWS ========================================================== */ .shadow-soft{ box-shadow: 0 12px 35px rgba(0,0,0,.06); } .shadow-medium{ box-shadow: 0 18px 45px rgba(0,0,0,.08); } .shadow-large{ box-shadow: 0 28px 80px rgba(0,0,0,.10); } /* ========================================================== AURORA BORDER ========================================================== */ .aurora-border{ position:relative; } .aurora-border::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient( 120deg, rgba(159,245,212,.65), rgba(141,232,255,.60), rgba(216,182,255,.60), rgba(255,217,138,.55) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* ========================================================== GLASS SURFACE ========================================================== */ .glass{ background: rgba(255,255,255,.58); backdrop-filter: blur(24px) saturate(160%); } /* ========================================================== SURFACE LEVELS ========================================================== */ .surface-1{ background:rgba(255,255,255,.50); } .surface-2{ background:rgba(255,255,255,.64); } .surface-3{ background:rgba(255,255,255,.78); } moss-mode ocean-mode cosmos-mode desert-mode library-mode garden-mode /* ========================================================== SURFACE ENGINE Semantic Engine Design Language ========================================================== */ /* ========================================================== BASE SURFACE ========================================================== */ .surface{ position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,.55); background: linear-gradient( 180deg, rgba(255,255,255,.78), rgba(250,253,252,.58) ); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 18px 45px rgba(0,0,0,.06); } /* ========================================================== SURFACE OVERLAY ========================================================== */ .surface::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.45), transparent 32% ); opacity:.9; } /* ========================================================== SURFACE GRAIN ========================================================== */ .surface::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.025; mix-blend-mode:multiply; background-image: radial-gradient( rgba(0,0,0,.16) .4px, transparent .5px ); background-size:14px 14px; } /* ========================================================== SURFACE LEVELS ========================================================== */ .surface-low{ background: rgba(255,255,255,.42); } .surface-medium{ background: rgba(255,255,255,.58); } .surface-high{ background: rgba(255,255,255,.82); } /* ========================================================== ELEVATION ========================================================== */ .elevation-1{ box-shadow: 0 10px 25px rgba(0,0,0,.05); } .elevation-2{ box-shadow: 0 18px 45px rgba(0,0,0,.08); } .elevation-3{ box-shadow: 0 28px 70px rgba(0,0,0,.12); } /* ========================================================== PANEL BORDER ========================================================== */ .panel-border{ border: 1px solid rgba(255,255,255,.55); } /* ========================================================== TOP HIGHLIGHT ========================================================== */ .top-highlight{ position:relative; } .top-highlight::before{ content:""; position:absolute; left:24px; right:24px; top:0; height:2px; border-radius:999px; background: linear-gradient( 90deg, transparent, rgba(159,245,212,.55), rgba(141,232,255,.55), rgba(216,182,255,.45), transparent ); } /* ========================================================== INNER LIGHT ========================================================== */ .inner-light{ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.18); } /* ========================================================== FROSTED PANEL ========================================================== */ .frosted{ backdrop-filter: blur(30px) saturate(185%); } /* ========================================================== PANEL SPACING ========================================================== */ .panel-padding-s{ padding:18px; } .panel-padding-m{ padding:28px; } .panel-padding-l{ padding:40px; } /* ========================================================== ROUNDED SYSTEM ========================================================== */ .round-s{ border-radius:14px; } .round-m{ border-radius:22px; } .round-l{ border-radius:34px; } .round-xl{ border-radius:46px; } /* ========================================================== COMPONENT SYSTEM Reusable Components ========================================================== */ /* ========================================================== FLEX ========================================================== */ .flex{ display:flex; } .flex-column{ display:flex; flex-direction:column; } .flex-center{ display:flex; align-items:center; justify-content:center; } .flex-between{ display:flex; align-items:center; justify-content:space-between; } .flex-wrap{ display:flex; flex-wrap:wrap; } /* ========================================================== GRID ========================================================== */ .grid{ display:grid; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .auto-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(260px,1fr) ); gap:24px; } /* ========================================================== GAP ========================================================== */ .gap-xs{ gap:8px; } .gap-s{ gap:12px; } .gap-m{ gap:20px; } .gap-l{ gap:32px; } .gap-xl{ gap:48px; } /* ========================================================== WIDTH ========================================================== */ .w-100{ width:100%; } .max-600{ max-width:600px; } .max-800{ max-width:800px; } .max-1200{ max-width:1200px; } /* ========================================================== TEXT ALIGN ========================================================== */ .text-left{ text-align:left; } .text-center{ text-align:center; } .text-right{ text-align:right; } /* ========================================================== VISIBILITY ========================================================== */ .hidden{ display:none !important; } .invisible{ visibility:hidden; } .opacity-0{ opacity:0; } .opacity-50{ opacity:.5; } .opacity-100{ opacity:1; } /* ========================================================== CURSOR ========================================================== */ .pointer{ cursor:pointer; } .no-select{ user-select:none; } /* ========================================================== DIVIDERS ========================================================== */ .divider{ width:100%; height:1px; background: linear-gradient( 90deg, transparent, rgba(0,0,0,.08), transparent ); } .vertical-divider{ width:1px; align-self:stretch; background: linear-gradient( transparent, rgba(0,0,0,.08), transparent ); } /* ========================================================== STATUS COLORS ========================================================== */ .success{ color:#2d8f5d; } .warning{ color:#c58b1d; } .error{ color:#cb4b4b; } .info{ color:#3d7fd6; } /* ========================================================== CONTENT CONTAINER ========================================================== */ .content-container{ width:100%; max-width:1600px; margin:0 auto; } /* ========================================================== EMPTY STATE ========================================================== */ .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:260px; text-align:center; color:var(--text-soft); } /* ========================================================== BUTTON SYSTEM ========================================================== */ .button{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 22px; border:none; border-radius:18px; cursor:pointer; font-family:var(--body-font); font-size:.95rem; font-weight:600; transition:all .3s ease; position:relative; overflow:hidden; } /* ========================================================== PRIMARY ========================================================== */ .button-primary{ color:#17372d; background: linear-gradient( 135deg, var(--mint), var(--cyan) ); box-shadow: 0 12px 30px rgba(141,232,255,.25); } .button-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px rgba(141,232,255,.35); } /* ========================================================== SECONDARY ========================================================== */ .button-secondary{ background: rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.65); color:var(--text); } .button-secondary:hover{ background: rgba(255,255,255,.85); } /* ========================================================== OUTLINE ========================================================== */ .button-outline{ background:transparent; border:1px solid var(--line); color:var(--text); } .button-outline:hover{ border-color:var(--mint); } /* ========================================================== GHOST ========================================================== */ .button-ghost{ background:transparent; } .button-ghost:hover{ background: rgba(159,245,212,.12); } /* ========================================================== ICON BUTTON ========================================================== */ .button-icon{ width:48px; height:48px; padding:0; } /* ========================================================== BUTTON SIZES ========================================================== */ .button-small{ min-height:36px; padding:0 16px; font-size:.82rem; } .button-large{ min-height:60px; padding:0 30px; font-size:1rem; } /* ========================================================== DISABLED ========================================================== */ .button:disabled{ opacity:.45; cursor:not-allowed; } /* ========================================================== SEARCH & INPUT SYSTEM ========================================================== */ /* ========================================================== INPUT BASE ========================================================== */ .input{ width:100%; min-height:54px; padding:0 20px; border-radius:18px; border:1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.72); backdrop-filter: blur(18px); font-size:.95rem; color:var(--text); transition:.3s; } .input::placeholder{ color:#90a09b; } .input:focus{ outline:none; border-color:var(--mint); box-shadow: 0 0 0 4px rgba(159,245,212,.18), 0 10px 35px rgba(141,232,255,.18); } /* ========================================================== SEARCH BAR ========================================================== */ .search{ position:relative; width:100%; } .search input{ padding-left:58px; padding-right:58px; } .search-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:22px; height:22px; opacity:.55; } .search-action{ position:absolute; right:10px; top:50%; transform:translateY(-50%); } /* ========================================================== SEARCH RESULTS ========================================================== */ .search-results{ position:absolute; top:calc(100% + 12px); left:0; width:100%; border-radius:22px; overflow:hidden; background: rgba(255,255,255,.92); backdrop-filter: blur(30px); border:1px solid rgba(255,255,255,.55); box-shadow: 0 30px 80px rgba(0,0,0,.12); z-index:500; } /* ========================================================== SEARCH ITEM ========================================================== */ .search-item{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; cursor:pointer; transition:.25s; } .search-item:hover{ background: rgba(159,245,212,.10); } .search-item-title{ font-weight:600; } .search-item-subtitle{ margin-top:4px; font-size:.82rem; color:var(--text-soft); } /* ========================================================== SEARCH BADGE ========================================================== */ .search-category{ padding:6px 10px; border-radius:999px; font-size:.72rem; background: rgba(159,245,212,.15); } /* ========================================================== SEARCH EMPTY ========================================================== */ .search-empty{ padding:36px; text-align:center; color:var(--text-soft); } /* ========================================================== COMMAND PALETTE ========================================================== */ .command{ position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:120px; background: rgba(15,25,22,.18); backdrop-filter:blur(10px); z-index:4000; } .command-window{ width:min(760px,92vw); border-radius:28px; overflow:hidden; background: rgba(255,255,255,.92); backdrop-filter: blur(40px); box-shadow: 0 40px 120px rgba(0,0,0,.16); } /* ========================================================== SIDEBAR SYSTEM ========================================================== */ /* ========================================================== LEFT SIDEBAR ========================================================== */ #left-sidebar{ display:flex; flex-direction:column; gap:24px; padding:8px; } /* ========================================================== SIDEBAR SECTION ========================================================== */ .sidebar-section{ display:flex; flex-direction:column; gap:16px; padding:22px; border-radius:22px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(20px); box-shadow: 0 12px 32px rgba(0,0,0,.05); } /* ========================================================== SIDEBAR TITLES ========================================================== */ .sidebar-section h3{ font-size:1rem; font-family:var(--body-font); font-weight:700; letter-spacing:.02em; } /* ========================================================== NAVIGATION ========================================================== */ #main-navigation{ display:flex; flex-direction:column; gap:8px; } /* ========================================================== NAVIGATION ITEM ========================================================== */ .navigation-button{ display:flex; align-items:center; gap:14px; width:100%; min-height:50px; padding:0 16px; border-radius:16px; text-align:left; color:var(--text); background:transparent; transition: background .25s ease, transform .25s ease, color .25s ease; } /* ========================================================== NAVIGATION HOVER ========================================================== */ .navigation-button:hover{ background: rgba(159,245,212,.12); transform: translateX(4px); } /* ========================================================== ACTIVE ITEM ========================================================== */ .navigation-button.active{ background: linear-gradient( 135deg, rgba(159,245,212,.22), rgba(141,232,255,.18) ); font-weight:600; box-shadow: inset 0 0 0 1px rgba(159,245,212,.18); } /* ========================================================== NAVIGATION INDICATOR ========================================================== */ .navigation-button.active::before{ content:""; width:6px; height:26px; border-radius:999px; background: linear-gradient( to bottom, var(--mint), var(--cyan) ); } /* ========================================================== SIDEBAR STATS ========================================================== */ .stat-box{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:16px; background: rgba(255,255,255,.42); } /* ========================================================== MINI CARDS ========================================================== */ .mini-card{ padding:14px; border-radius:16px; background: rgba(255,255,255,.45); transition:.3s; } .mini-card:hover{ transform:translateY(-2px); background: rgba(255,255,255,.65); } /* ========================================================== TAG CLOUD ========================================================== */ .tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; } /* ========================================================== FAVORITE LIST ========================================================== */ .favorite-list{ display:flex; flex-direction:column; gap:10px; } .favorite-item{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; background: rgba(255,255,255,.40); transition:.25s; } .favorite-item:hover{ background: rgba(159,245,212,.10); } /* ========================================================== CONTEXT PANEL SYSTEM Semantic Engine ========================================================== */ /* ========================================================== RIGHT PANEL ========================================================== */ #right-panel{ display:flex; flex-direction:column; gap:22px; padding:8px; } /* ========================================================== CONTEXT CARD ========================================================== */ .context-card{ position:relative; display:flex; flex-direction:column; gap:18px; padding:24px; border-radius:22px; overflow:hidden; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(22px); transition:.35s; } .context-card:hover{ transform:translateY(-3px); } /* ========================================================== CARD TITLE ========================================================== */ .context-title{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .context-title h3{ font-size:1.05rem; font-family:var(--body-font); } /* ========================================================== CONTEXT CONTENT ========================================================== */ .context-content{ display:flex; flex-direction:column; gap:14px; } /* ========================================================== CONTEXT ROW ========================================================== */ .context-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } /* ========================================================== INFO LABEL ========================================================== */ .context-label{ min-width:92px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); } /* ========================================================== INFO VALUE ========================================================== */ .context-value{ flex:1; color:var(--text); } /* ========================================================== RELATED LIST ========================================================== */ .related-list{ display:flex; flex-wrap:wrap; gap:10px; } /* ========================================================== RELATED CHIP ========================================================== */ .related-chip{ padding: 8px 14px; border-radius:999px; background: rgba(159,245,212,.12); transition:.3s; } .related-chip:hover{ background: rgba(159,245,212,.24); } /* ========================================================== SCORE ========================================================== */ .context-score{ display:flex; flex-direction:column; gap:10px; } .score-bar{ height:8px; overflow:hidden; border-radius:999px; background: rgba(0,0,0,.05); } .score-fill{ width:65%; height:100%; border-radius:999px; background: linear-gradient( 90deg, var(--mint), var(--cyan), var(--violet) ); } /* ========================================================== MINI TIMELINE ========================================================== */ .timeline{ display:flex; flex-direction:column; gap:14px; } .timeline-item{ display:flex; gap:16px; } .timeline-dot{ width:10px; height:10px; margin-top:7px; border-radius:50%; background: var(--mint); } /* ========================================================== BOOK PREVIEW ========================================================== */ .book-preview{ display:flex; gap:14px; align-items:flex-start; } .book-cover{ width:58px; aspect-ratio:3/4; border-radius:10px; background: rgba(159,245,212,.16); } .book-info{ display:flex; flex-direction:column; gap:6px; } /* ========================================================== MODAL WINDOW SYSTEM Semantic Engine ========================================================== */ /* ========================================================== MODAL OVERLAY ========================================================== */ .modal-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:40px; background: rgba(18,28,27,.26); backdrop-filter: blur(18px); z-index:5000; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .35s ease, visibility .35s ease; } .modal-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; } /* ========================================================== MODAL WINDOW ========================================================== */ .modal{ position:relative; display:flex; flex-direction:column; width:min(920px,92vw); max-height:88vh; overflow:hidden; border-radius:30px; background: linear-gradient( 180deg, rgba(255,255,255,.92), rgba(247,251,249,.86) ); border: 1px solid rgba(255,255,255,.68); backdrop-filter: blur(28px) saturate(170%); box-shadow: 0 36px 120px rgba(0,0,0,.18); animation: modalEnter .32s cubic-bezier(.22,.61,.36,1); } /* ========================================================== MODAL HEADER ========================================================== */ .modal-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; border-bottom: 1px solid rgba(0,0,0,.05); } .modal-title{ display:flex; flex-direction:column; gap:6px; } .modal-title h2{ font-size:1.7rem; } .modal-title p{ font-size:.9rem; color:var(--text-soft); } /* ========================================================== CLOSE BUTTON ========================================================== */ .modal-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; background: rgba(255,255,255,.55); transition:.25s; } .modal-close:hover{ background: rgba(255,255,255,.82); transform: rotate(90deg); } /* ========================================================== MODAL BODY ========================================================== */ .modal-body{ flex:1; overflow:auto; padding:28px; } /* ========================================================== MODAL FOOTER ========================================================== */ .modal-footer{ display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:22px 28px; border-top: 1px solid rgba(0,0,0,.05); } /* ========================================================== MODAL SIZES ========================================================== */ .modal-small{ width:min(520px,92vw); } .modal-medium{ width:min(760px,92vw); } .modal-large{ width:min(1080px,94vw); } .modal-full{ width:96vw; height:94vh; max-height:none; } /* ========================================================== MODAL ANIMATION ========================================================== */ @keyframes modalEnter{ from{ opacity:0; transform: translateY(30px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } } /* ========================================================== MODAL SCROLLBAR ========================================================== */ .modal-body::-webkit-scrollbar{ width:10px; } .modal-body::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, var(--mint), var(--cyan) ); border-radius:999px; } /* ========================================================== NOTIFICATION & TOOLTIP SYSTEM Semantic Engine ========================================================== */ /* ========================================================== TOAST CONTAINER ========================================================== */ #toast-container{ position:fixed; top:28px; right:28px; width:min(380px,92vw); display:flex; flex-direction:column; gap:16px; z-index:7000; pointer-events:none; } /* ========================================================== TOAST ========================================================== */ .se-toast{ pointer-events:auto; position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:16px; padding:18px 20px; border-radius:22px; background: linear-gradient( 180deg, rgba(255,255,255,.92), rgba(246,250,248,.86) ); border:1px solid rgba(255,255,255,.72); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 24px 60px rgba(0,0,0,.14); animation: toastIn .35s cubic-bezier(.22,.61,.36,1); } /* ========================================================== TOAST COLORS ========================================================== */ .se-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: linear-gradient( 180deg, var(--mint), var(--cyan) ); } .se-toast--success::before{ background:#43c77b; } .se-toast--warning::before{ background:#e6b43b; } .se-toast--danger::before{ background:#de5a67; } .se-toast--info::before{ background:var(--cyan); } /* ========================================================== TOAST CONTENT ========================================================== */ .se-toast__content{ flex:1; display:flex; flex-direction:column; gap:6px; } .se-toast__title{ font-weight:700; color:var(--text); } .se-toast__message{ font-size:.88rem; color:var(--text-soft); line-height:1.6; } /* ========================================================== TOAST ACTION ========================================================== */ .se-toast__action{ margin-top:10px; display:flex; gap:10px; } /* ========================================================== TOOLTIP ========================================================== */ .se-tooltip{ position:absolute; z-index:9000; padding:10px 14px; border-radius:14px; background: rgba(24,32,31,.92); color:white; font-size:.78rem; line-height:1.5; white-space:nowrap; backdrop-filter:blur(12px); box-shadow: 0 16px 40px rgba(0,0,0,.22); opacity:0; pointer-events:none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .se-tooltip.is-visible{ opacity:1; transform: translateY(0); } .se-tooltip::after{ content:""; position:absolute; left:18px; bottom:-6px; width:12px; height:12px; transform:rotate(45deg); background: rgba(24,32,31,.92); } /* ========================================================== CONTEXT MENU ========================================================== */ .se-context-menu{ position:fixed; min-width:240px; padding:10px; border-radius:18px; background: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.72); backdrop-filter: blur(24px); box-shadow: 0 26px 70px rgba(0,0,0,.14); z-index:8000; } .se-context-item{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; cursor:pointer; transition:.2s; } .se-context-item:hover{ background: rgba(159,245,212,.12); } /* ========================================================== TOAST ANIMATION ========================================================== */ @keyframes toastIn{ from{ opacity:0; transform: translateX(50px) scale(.96); } to{ opacity:1; transform: translateX(0) scale(1); } } /* ========================================================== RESPONSIVE SYSTEM ========================================================== */ /* ========================================================== LARGE DESKTOP ========================================================== */ @media (max-width: 1600px){ #main-layout{ grid-template-columns: 230px 1fr 320px; } } /* ========================================================== DESKTOP ========================================================== */ @media (max-width: 1400px){ #main-layout{ grid-template-columns: 210px 1fr 300px; gap:20px; padding:24px; } } /* ========================================================== LAPTOP ========================================================== */ @media (max-width: 1200px){ #right-panel{ display:none; } #main-layout{ grid-template-columns: 210px 1fr; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 900px){ #global-dock{ left:14px; width:72px; } #main-layout{ grid-template-columns: 1fr; padding:20px; } #left-sidebar{ display:none; } .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:700px){ #global-header{ flex-direction:column; height:auto; gap:18px; padding:18px; } #header-center{ width:100%; } #workspace{ gap:20px; } .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } .panel-header{ gap:12px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:480px){ body{ font-size:15px; } .workspace-card, .dashboard-card, .analysis-card, .collection-card, .exploration-card, .idea-card, .laboratory-card{ padding:18px; border-radius:18px; } h1{ font-size:2rem; } h2{ font-size:1.5rem; } } /* ========================================================== THEME SYSTEM ========================================================== */ /* ========================================================== GARDEN ========================================================== */ body.theme-garden{ --color-background:#edf5ee; --color-surface:#f8fcf8; --mint:#97e5be; --cyan:#b8efe8; --violet:#d8d6ff; --olive:#9ebf74; } /* ========================================================== LIBRARY ========================================================== */ body.theme-library{ --color-background:#f4f1ea; --color-surface:#fbf9f4; --mint:#b7d9c4; --cyan:#bfdde7; --violet:#d6cfe3; --olive:#b59c74; } /* ========================================================== COSMOS ========================================================== */ body.theme-cosmos{ --color-background:#edf3f8; --color-surface:#f7fbff; --mint:#8ed7d8; --cyan:#7ebeff; --violet:#b7a8ff; --olive:#7da8b5; } /* ========================================================== DESERT ========================================================== */ body.theme-desert{ --color-background:#fbf3e8; --color-surface:#fffaf4; --mint:#b5d7ae; --cyan:#b7ddd8; --violet:#dcc8c0; --olive:#cbab6c; } /* ========================================================== OCEAN ========================================================== */ body.theme-ocean{ --color-background:#edf7f8; --color-surface:#f8feff; --mint:#8ddfd7; --cyan:#77d8ff; --violet:#b4d3ff; --olive:#8db8a9; } /* ========================================================== NIGHT ========================================================== */ body.theme-night{ --color-background:#182322; --color-surface:#243231; --color-surface-light:#2c3d3b; --color-text:#eef7f4; --color-text-soft:#bdd1cb; --color-border:#38504d; } /* ========================================================== THEME TRANSITION ========================================================== */ body{ transition: background-color .8s ease, color .4s ease; } .workspace-card, .dashboard-card, .analysis-card, .collection-card, .exploration-card, .idea-card, .laboratory-card, .context-card, .sidebar-section{ transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease, color .4s ease; } /* ========================================================== ACCENT COLORS ========================================================== */ .accent-mint{ color:var(--mint); } .accent-cyan{ color:var(--cyan); } .accent-violet{ color:var(--violet); } .accent-olive{ color:var(--olive); } .accent-amber{ color:var(--amber); } .accent-rose{ color:var(--rose); } /* ========================================================== BACKGROUND ACCENTS ========================================================== */ .bg-mint{ background:rgba(159,245,212,.12); } .bg-cyan{ background:rgba(141,232,255,.12); } .bg-violet{ background:rgba(216,182,255,.12); } .bg-olive{ background:rgba(168,196,141,.12); } .bg-amber{ background:rgba(255,217,138,.12); } .bg-rose{ background:rgba(255,191,215,.12); } /* ========================================================== FINAL POLISH ========================================================== */ /* ========================================================== ACCESSIBILITY ========================================================== */ :focus-visible{ outline:3px solid rgba(141,232,255,.75); outline-offset:3px; border-radius:8px; } ::selection{ background:rgba(141,232,255,.35); color:var(--color-text); } /* ========================================================== LOADING STATES ========================================================== */ .loading{ pointer-events:none; opacity:.65; } .loading *{ cursor:progress !important; } /* ========================================================== SKELETON ========================================================== */ .skeleton{ position:relative; overflow:hidden; background:#eef3f1; border-radius:14px; } .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent ); animation: skeletonLoading 1.4s infinite; } @keyframes skeletonLoading{ 100%{ transform:translateX(100%); } } /* ========================================================== IMAGE ========================================================== */ img{ max-width:100%; display:block; border-radius:inherit; } /* ========================================================== SVG ========================================================== */ svg{ display:block; width:100%; height:auto; } /* ========================================================== HORIZONTAL SCROLL ========================================================== */ .scroll-x{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; } /* ========================================================== VERTICAL SCROLL ========================================================== */ .scroll-y{ overflow-y:auto; overflow-x:hidden; } /* ========================================================== USER SELECTION ========================================================== */ .no-select{ user-select:none; } .select-text{ user-select:text; } /* ========================================================== POINTER ========================================================== */ .pointer{ cursor:pointer; } .disabled{ pointer-events:none; opacity:.45; } /* ========================================================== PRINT ========================================================== */ @media print{ #global-dock, #floating-actions, #right-panel, #left-sidebar, #toast-container, .modal-overlay{ display:none !important; } body{ background:white; } } /* ========================================================== PERFORMANCE ========================================================== */ .hover-lift, .workspace-card, .dashboard-card, .analysis-card, .collection-card, .exploration-card, .idea-card, .context-card{ will-change: transform; } /* ========================================================== FADE UTILITIES ========================================================== */ .fade{ opacity:0; } .fade.show{ opacity:1; } /* ========================================================== UTILITIES ========================================================== */ .round{ border-radius:999px; } .shadow{ box-shadow:var(--shadow-m); } .border{ border:1px solid var(--color-border); } .center{ display:flex; justify-content:center; align-items:center; } /* ========================================================== END OF STYLE ========================================================== */ /* ========================================================== FINAL CLEANUP Semantic Engine ========================================================== */ /* ========================================================== BOX MODEL SAFETY ========================================================== */ *, *::before, *::after{ box-sizing:border-box; } /* ========================================================== MEDIA DEFAULTS ========================================================== */ img, picture, video, canvas, svg{ display:block; max-width:100%; } /* ========================================================== FORM ELEMENTS ========================================================== */ button, input, textarea, select{ font:inherit; color:inherit; } /* ========================================================== TEXTAREA ========================================================== */ textarea{ resize:vertical; min-height:120px; } /* ========================================================== TABLE ========================================================== */ table{ width:100%; border-collapse:collapse; } th, td{ padding:14px; text-align:left; } /* ========================================================== LIST ========================================================== */ ul, ol{ padding-left:24px; } /* ========================================================== HIDDEN ========================================================== */ [hidden]{ display:none !important; } /* ========================================================== SMOOTH RENDERING ========================================================== */ html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ========================================================== OVERFLOW FIX ========================================================== */ body{ overflow-x:hidden; } /* ========================================================== FINAL TRANSITION ========================================================== */ html{ scroll-behavior:smooth; } /* ========================================================== VERSION ========================================================== */ /* Semantic Engine Aurora Archive UI Version 1.0 Designed by Zeyneb Buran Interface Architecture Semantic Engine */