/* ============================================================ Rock Portfolio v2 — Complete Frontend Stylesheet All selectors scoped under .rock-portfolio-wrap Behance-quality layout · SaaS-level interactions ============================================================ */ /* ── Design tokens ──────────────────────────────────────────── */ /* Also defined on :root: the quick-view and hire modals are appended directly to by JS, outside .rock-portfolio-wrap, so they need the variables available globally or their panels render transparent. */ :root, .rock-portfolio-wrap { --rp-accent: #6366f1; --rp-accent-dark: #4f46e5; --rp-accent-tint: rgba(99,102,241,.09); --rp-accent-glow: rgba(99,102,241,.25); --rp-cols-desktop: 3; --rp-cols-tablet: 2; --rp-cols-mobile: 1; --rp-bg: #ffffff; --rp-surface: #f3f3f1; --rp-surface-2: #eeeeed; --rp-border: #e4e4e2; --rp-border-hover: #cfcfcc; --rp-text-1: #0d0d0d; --rp-text-2: #5c5c5c; --rp-text-3: #8a8a8a; --rp-text-4: #aaaaaa; --rp-shadow-xs: 0 1px 2px rgba(0,0,0,.04); --rp-shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 4px 18px rgba(0,0,0,.06); --rp-shadow-md: 0 6px 20px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04); --rp-shadow-lg: 0 20px 56px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.05); --rp-shadow-xl: 0 32px 80px rgba(0,0,0,.14), 0 16px 40px rgba(0,0,0,.07); --rp-r-sm: 8px; --rp-r-md: 10px; --rp-r-lg: 14px; --rp-r-xl: 18px; --rp-r-full: 100px; --rp-ease: cubic-bezier(.22,1,.36,1); --rp-ease-in: cubic-bezier(.4,0,1,1); --rp-ease-spring: cubic-bezier(.34,1.56,.64,1); --rp-dur-fast: 150ms; --rp-dur: 220ms; --rp-dur-slow: 380ms; --rp-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --rp-font-display: 'Syne', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-family: var(--rp-font); color: var(--rp-text-1); line-height: 1.5; -webkit-font-smoothing: antialiased; } .rock-portfolio-wrap *, .rock-portfolio-wrap *::before, .rock-portfolio-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; } /* JS toggles visibility via the [hidden] attribute on several elements (empty state, load-more button, end-of-results message). Their own classes set an explicit display value with higher specificity than the browser's default [hidden]{display:none}, so without this override they never actually hide. */ .rock-portfolio-wrap [hidden] { display: none !important; } /* ── Page wrapper — max-width + centred ─────────────────────── */ .rock-portfolio-wrap { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 32px; } @media (max-width: 768px) { .rock-portfolio-wrap { padding: 0 20px; } } @media (max-width: 480px) { .rock-portfolio-wrap { padding: 0 16px; } } /* ── Toolbar ────────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 32px 0 28px; border-bottom: 1px solid var(--rp-border); margin-bottom: 32px; } /* Filter pills */ .rock-portfolio-wrap .rp-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rock-portfolio-wrap .rp-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-full); background: transparent; color: var(--rp-text-3); font-size: 13px; font-weight: 500; font-family: var(--rp-font); cursor: pointer; transition: color var(--rp-dur-fast), border-color var(--rp-dur-fast), background var(--rp-dur-fast), box-shadow var(--rp-dur-fast); white-space: nowrap; line-height: 1; user-select: none; } .rock-portfolio-wrap .rp-filter-btn:hover { border-color: var(--rp-accent); color: var(--rp-accent); background: var(--rp-accent-tint); } .rock-portfolio-wrap .rp-filter-btn.is-active { background: var(--rp-accent); border-color: var(--rp-accent); color: #fff; box-shadow: 0 2px 10px var(--rp-accent-glow); } .rock-portfolio-wrap .rp-filter-count { font-size: 10px; opacity: .7; background: rgba(255,255,255,.25); border-radius: 10px; padding: 1px 5px; } .rock-portfolio-wrap .rp-filter-btn:not(.is-active) .rp-filter-count { background: var(--rp-surface-2); color: var(--rp-text-3); } /* Toolbar right side */ .rock-portfolio-wrap .rp-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Search */ .rock-portfolio-wrap .rp-search-wrap { position: relative; } .rock-portfolio-wrap .rp-search { padding: 8px 12px 8px 36px; border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-full); font-size: 13px; font-family: var(--rp-font); color: var(--rp-text-1); background: var(--rp-bg); width: 200px; transition: border-color var(--rp-dur), box-shadow var(--rp-dur), width var(--rp-dur) var(--rp-ease); outline: none; } .rock-portfolio-wrap .rp-search:focus { border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-tint); width: 260px; } .rock-portfolio-wrap .rp-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rp-text-4); pointer-events: none; line-height: 0; } /* Layout switcher */ .rock-portfolio-wrap .rp-layout-switcher { display: flex; gap: 2px; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-r-sm); padding: 3px; } .rock-portfolio-wrap .rp-layout-btn { width: 30px; height: 30px; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--rp-text-4); display: flex; align-items: center; justify-content: center; transition: background var(--rp-dur-fast), color var(--rp-dur-fast); } .rock-portfolio-wrap .rp-layout-btn.is-active { background: var(--rp-bg); color: var(--rp-accent); box-shadow: var(--rp-shadow-xs); } .rock-portfolio-wrap .rp-layout-btn:hover:not(.is-active) { color: var(--rp-text-2); } /* ── Grid ───────────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-grid { display: grid; grid-template-columns: repeat(var(--rp-cols-desktop), 1fr); gap: 24px; transition: opacity var(--rp-dur); } @media (max-width: 1024px) { .rock-portfolio-wrap .rp-grid { grid-template-columns: repeat(var(--rp-cols-tablet), 1fr); } } @media (max-width: 640px) { .rock-portfolio-wrap .rp-grid { grid-template-columns: repeat(var(--rp-cols-mobile), 1fr); gap: 16px; } } /* Masonry layout */ .rock-portfolio-wrap .rp-grid--masonry { display: block; column-count: var(--rp-cols-desktop); column-gap: 24px; } .rock-portfolio-wrap .rp-grid--masonry .rp-card { break-inside: avoid; margin-bottom: 24px; } .rock-portfolio-wrap .rp-grid--masonry .rp-card__thumb-wrap { aspect-ratio: unset; } .rock-portfolio-wrap .rp-grid--masonry .rp-card__thumb { height: auto; width: 100%; object-fit: cover; } @media (max-width: 1024px) { .rock-portfolio-wrap .rp-grid--masonry { column-count: var(--rp-cols-tablet); } } @media (max-width: 640px) { .rock-portfolio-wrap .rp-grid--masonry { column-count: var(--rp-cols-mobile); column-gap: 12px; } } /* List layout */ .rock-portfolio-wrap .rp-grid--list { grid-template-columns: 1fr; gap: 16px; } .rock-portfolio-wrap .rp-grid--list .rp-card { flex-direction: row; max-height: 180px; } .rock-portfolio-wrap .rp-grid--list .rp-card__thumb-wrap { width: 280px; flex-shrink: 0; aspect-ratio: unset; min-height: 100%; } .rock-portfolio-wrap .rp-grid--list .rp-card__body { padding: 20px 24px; justify-content: center; } .rock-portfolio-wrap .rp-grid--list .rp-card__excerpt { display: block; -webkit-line-clamp: 3; } @media (max-width: 640px) { .rock-portfolio-wrap .rp-grid--list .rp-card { flex-direction: column; max-height: none; } .rock-portfolio-wrap .rp-grid--list .rp-card__thumb-wrap { width: 100%; } } /* ── Carousel ───────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-carousel-wrap { position: relative; overflow: visible; } .rock-portfolio-wrap .rp-grid--carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .rock-portfolio-wrap .rp-grid--carousel::-webkit-scrollbar { display: none; } .rock-portfolio-wrap .rp-grid--carousel .rp-card { flex: 0 0 calc((100% - 48px) / var(--rp-cols-desktop)); scroll-snap-align: start; } @media (max-width: 1024px) { .rock-portfolio-wrap .rp-grid--carousel .rp-card { flex-basis: calc((100% - 24px) / var(--rp-cols-tablet)); } } @media (max-width: 640px) { .rock-portfolio-wrap .rp-grid--carousel .rp-card { flex-basis: 90%; } } .rock-portfolio-wrap .rp-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--rp-border); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--rp-text-2); box-shadow: var(--rp-shadow-sm); transition: all var(--rp-dur) var(--rp-ease); z-index: 3; } .rock-portfolio-wrap .rp-carousel-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: var(--rp-shadow-md); color: var(--rp-accent); border-color: var(--rp-accent); } .rock-portfolio-wrap .rp-carousel-btn--prev { left: -20px; } .rock-portfolio-wrap .rp-carousel-btn--next { right: -20px; } .rock-portfolio-wrap .rp-carousel-btn[disabled] { opacity: .3; cursor: default; } .rock-portfolio-wrap .rp-carousel-btn[disabled]:hover { transform: translateY(-50%); box-shadow: var(--rp-shadow-sm); color: var(--rp-text-2); border-color: var(--rp-border); } .rock-portfolio-wrap .rp-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .rock-portfolio-wrap .rp-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rp-border); cursor: pointer; transition: background var(--rp-dur), width var(--rp-dur) var(--rp-ease); border: none; padding: 0; } .rock-portfolio-wrap .rp-carousel-dot.is-active { background: var(--rp-accent); width: 20px; border-radius: 3px; } /* ── Card base ──────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-card { position: relative; background: var(--rp-bg); border-radius: var(--rp-r-lg); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform var(--rp-dur) var(--rp-ease), box-shadow var(--rp-dur) var(--rp-ease), border-color var(--rp-dur); will-change: transform; -webkit-tap-highlight-color: transparent; } /* Elevated */ .rock-portfolio-wrap .rp-card--elevated { box-shadow: var(--rp-shadow-sm); border: 1px solid var(--rp-border); } .rock-portfolio-wrap .rp-card--elevated:hover { transform: translateY(-6px); box-shadow: var(--rp-shadow-md); } /* Bordered */ .rock-portfolio-wrap .rp-card--bordered { border: 2px solid var(--rp-border); } .rock-portfolio-wrap .rp-card--bordered:hover { border-color: var(--rp-accent); transform: translateY(-3px); box-shadow: 0 0 0 4px var(--rp-accent-tint); } /* Flat */ .rock-portfolio-wrap .rp-card--flat { background: var(--rp-surface); } .rock-portfolio-wrap .rp-card--flat:hover { background: var(--rp-surface-2); transform: translateY(-2px); } /* Featured indicator */ .rock-portfolio-wrap .rp-card--featured::after { content: '★'; position: absolute; top: 12px; right: 12px; background: var(--rp-accent); color: #fff; font-size: 10px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; box-shadow: 0 2px 6px var(--rp-accent-glow); } /* ── Card thumbnail ─────────────────────────────────────────── */ .rock-portfolio-wrap .rp-card__thumb-wrap { position: relative; overflow: hidden; background: var(--rp-surface); aspect-ratio: 16 / 10; flex-shrink: 0; } /* Custom image loader */ .rock-portfolio-wrap .rp-card__thumb-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--rp-surface) 25%, var(--rp-surface-2) 50%, var(--rp-surface) 75%); background-size: 200% 100%; animation: rp-shimmer 1.6s infinite; z-index: 0; transition: opacity .4s; } .rock-portfolio-wrap .rp-card__thumb-wrap.is-loaded::before { opacity: 0; pointer-events: none; } .rock-portfolio-wrap .rp-card__thumb { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--rp-ease), opacity .4s; opacity: 0; } .rock-portfolio-wrap .rp-card__thumb.is-loaded { opacity: 1; } .rock-portfolio-wrap .rp-card:hover .rp-card__thumb { transform: scale(1.05); } /* Scroll-on-hover — speed proportional to image height via JS */ .rock-portfolio-wrap .rp-card--scroll-preview .rp-card__thumb { height: auto; min-height: 100%; object-fit: cover; object-position: top center; transform: translateY(0); /* JS controls this via inline style */ } /* Scroll hint badge */ .rock-portfolio-wrap .rp-scroll-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(15,23,42,.72); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: var(--rp-r-full); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--rp-dur), transform var(--rp-dur); z-index: 4; display: flex; align-items: center; gap: 5px; } .rock-portfolio-wrap .rp-card--scroll-preview:not(:hover) .rp-scroll-hint { opacity: 1; transform: translateX(-50%) translateY(0); } .rock-portfolio-wrap .rp-card--scroll-preview:hover .rp-scroll-hint { opacity: 0; } /* Overlay */ .rock-portfolio-wrap .rp-card__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,0) 30%, rgba(15,23,42,.72) 100%); opacity: 0; transition: opacity var(--rp-dur) var(--rp-ease); display: flex; align-items: flex-end; justify-content: center; padding: 16px; gap: 8px; z-index: 2; } .rock-portfolio-wrap .rp-card:hover .rp-card__overlay { opacity: 1; } .rock-portfolio-wrap .rp-card__overlay .rp-btn { transform: translateY(8px); opacity: 0; transition: transform var(--rp-dur) var(--rp-ease), opacity var(--rp-dur); } .rock-portfolio-wrap .rp-card:hover .rp-card__overlay .rp-btn { transform: translateY(0); opacity: 1; } .rock-portfolio-wrap .rp-card:hover .rp-card__overlay .rp-btn:nth-child(2) { transition-delay: 50ms; } .rock-portfolio-wrap .rp-card:hover .rp-card__overlay .rp-btn:nth-child(3) { transition-delay: 100ms; } /* Type badge on overlay */ .rock-portfolio-wrap .rp-card__type-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: var(--rp-r-full); pointer-events: none; z-index: 3; border: 1px solid rgba(255,255,255,.15); } /* ── Browser frame ──────────────────────────────────────────── */ .rock-portfolio-wrap .rp-browser-frame { background: #1e293b; padding: 10px 14px 0; } .rock-portfolio-wrap .rp-card .rp-browser-frame { /* Match the card's own corner radius (minus its border width) so the dark frame nests flush against the card edge instead of leaving a visible lighter sliver where a smaller radius used to peek through. */ border-radius: calc(var(--rp-r-lg) - 1px) calc(var(--rp-r-lg) - 1px) 0 0; } .rock-portfolio-wrap .rp-browser-frame__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rock-portfolio-wrap .rp-browser-frame__dots { display: flex; gap: 5px; } .rock-portfolio-wrap .rp-browser-frame__dot { width: 10px; height: 10px; border-radius: 50%; } .rock-portfolio-wrap .rp-browser-frame__dot:nth-child(1) { background: #ff5f57; } .rock-portfolio-wrap .rp-browser-frame__dot:nth-child(2) { background: #febc2e; } .rock-portfolio-wrap .rp-browser-frame__dot:nth-child(3) { background: #28c840; } .rock-portfolio-wrap .rp-browser-frame__url { flex: 1; background: #334155; border-radius: var(--rp-r-full); padding: 4px 12px; font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; } .rock-portfolio-wrap .rp-browser-frame__open { color: #64748b; text-decoration: none; flex-shrink: 0; display: flex; align-items: center; padding: 3px; border-radius: 4px; transition: color var(--rp-dur); } .rock-portfolio-wrap .rp-browser-frame__open:hover { color: #e2e8f0; } /* ── Card body ──────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .rock-portfolio-wrap .rp-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rock-portfolio-wrap .rp-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--rp-accent-tint); color: var(--rp-accent); border-radius: var(--rp-r-full); font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; } .rock-portfolio-wrap .rp-tag--featured { background: #fef3c7; color: #b45309; } /* Type-specific tag colors, matching each project type's accent identity */ .rock-portfolio-wrap .rp-tag--type-web-dev { background: rgba(99,102,241,.12); color: #6366f1; } .rock-portfolio-wrap .rp-tag--type-marketing { background: rgba(245,158,11,.12); color: #d97706; } .rock-portfolio-wrap .rp-tag--type-case-study { background: rgba(6,182,212,.12); color: #0891b2; } .rock-portfolio-wrap .rp-tag--type-before-after { background: rgba(139,92,246,.12); color: #7c3aed; } .rock-portfolio-wrap .rp-tag--type-graphics { background: rgba(236,72,153,.12); color: #db2777; } .rock-portfolio-wrap .rp-card__year { font-size: 11px; color: var(--rp-text-4); margin-left: auto; } .rock-portfolio-wrap .rp-card__title { font-family: var(--rp-font-display); font-size: 16px; font-weight: 700; color: var(--rp-text-1); line-height: 1.3; letter-spacing: -.01em; transition: color var(--rp-dur-fast); } .rock-portfolio-wrap .rp-card:hover .rp-card__title { color: var(--rp-accent); } .rock-portfolio-wrap .rp-card__excerpt { font-size: 13px; color: var(--rp-text-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Stat badges */ .rock-portfolio-wrap .rp-stats-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .rock-portfolio-wrap .rp-stat-badge { display: flex; flex-direction: column; align-items: center; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-r-sm); padding: 7px 10px; min-width: 64px; text-align: center; flex: 1; } .rock-portfolio-wrap .rp-stat-badge__value { font-size: 15px; font-weight: 800; color: var(--rp-accent); line-height: 1; } .rock-portfolio-wrap .rp-stat-badge__label { font-size: 10px; font-weight: 500; color: var(--rp-text-4); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; line-height: 1.2; } /* Skills strip */ .rock-portfolio-wrap .rp-skills-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; } .rock-portfolio-wrap .rp-skill-pill { font-size: 11px; font-weight: 500; color: var(--rp-text-3); background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 4px; padding: 2px 7px; } /* Card footer: company name bottom-left, views/comments/likes bottom-right */ .rock-portfolio-wrap .rp-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rp-border); } .rock-portfolio-wrap .rp-card__client { font-size: 12px; color: var(--rp-text-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rock-portfolio-wrap .rp-card__social-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .rock-portfolio-wrap .rp-card__views, .rock-portfolio-wrap .rp-card__comments { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rp-text-3); } .rock-portfolio-wrap .rp-card__views .rp-icon, .rock-portfolio-wrap .rp-card__comments .rp-icon { color: var(--rp-text-4); } .rock-portfolio-wrap .rp-card__like-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; background: none; font-size: 12px; font-weight: 600; color: var(--rp-text-3); cursor: pointer; font-family: var(--rp-font); transition: color var(--rp-dur-fast); } .rock-portfolio-wrap .rp-card__like-btn:hover { color: #ef4444; } .rock-portfolio-wrap .rp-card__like-btn.is-liked { color: #ef4444; } .rock-portfolio-wrap .rp-card__like-btn .rp-like-icon { flex-shrink: 0; } /* Shared icon sprite references () */ .rp-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } /* ── Buttons ────────────────────────────────────────────────── */ .rp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--rp-r-sm); font-size: 13px; font-weight: 500; font-family: var(--rp-font); cursor: pointer; border: none; text-decoration: none !important; white-space: nowrap; line-height: 1; transition: all var(--rp-dur) var(--rp-ease); user-select: none; } .rp-btn--primary { background: var(--rp-accent); color: #fff !important; box-shadow: 0 2px 8px var(--rp-accent-glow); } .rp-btn--primary:hover { background: var(--rp-accent-dark); box-shadow: 0 4px 14px var(--rp-accent-glow); } .rp-btn--ghost { background: rgba(255,255,255,.14); color: #fff !important; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); } .rp-btn--ghost:hover { background: rgba(255,255,255,.24); } .rp-btn--outline { background: transparent; color: var(--rp-accent) !important; border: 1.5px solid var(--rp-accent); } .rp-btn--outline:hover { background: var(--rp-accent-tint); } .rp-btn--neutral { background: var(--rp-surface); color: var(--rp-text-2) !important; border: 1.5px solid var(--rp-border); } .rp-btn--neutral:hover { border-color: var(--rp-accent); color: var(--rp-accent) !important; } .rp-btn--white { background: #fff; color: var(--rp-accent) !important; } .rp-btn--white:hover { background: #f3f3f1; } .rp-btn--full { width: 100%; justify-content: center; } .rp-btn--lg { padding: 12px 24px; font-size: 14px; border-radius: var(--rp-r-md); } /* ── Before/After slider ────────────────────────────────────── */ .rock-portfolio-wrap .rp-ba-slider { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--rp-r-md); user-select: none; cursor: col-resize; touch-action: pan-y; } .rock-portfolio-wrap .rp-ba-slider__before, .rock-portfolio-wrap .rp-ba-slider__after { position: absolute; inset: 0; } .rock-portfolio-wrap .rp-ba-slider__before img, .rock-portfolio-wrap .rp-ba-slider__after img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; } .rock-portfolio-wrap .rp-ba-slider__after { clip-path: inset(0 50% 0 0); } .rock-portfolio-wrap .rp-ba-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 3; } .rock-portfolio-wrap .rp-ba-slider__knob { width: 40px; height: 40px; background: #fff; border-radius: 50%; box-shadow: var(--rp-shadow-md); display: flex; align-items: center; justify-content: center; color: var(--rp-text-2); cursor: col-resize; flex-shrink: 0; transition: transform var(--rp-dur) var(--rp-ease-spring); } .rock-portfolio-wrap .rp-ba-slider:hover .rp-ba-slider__knob { transform: scale(1.12); } .rock-portfolio-wrap .rp-ba-label { position: absolute; bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; padding: 3px 10px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border-radius: var(--rp-r-sm); pointer-events: none; z-index: 2; } .rock-portfolio-wrap .rp-ba-label--before { left: 14px; } .rock-portfolio-wrap .rp-ba-label--after { right: 14px; } /* ── Quick view modal ─────────────────────────────────────────────────────── The popup is a long card, not a fixed-height box with its own internal scrollbar: the overlay itself is the scroll container, the panel grows to its natural content height, and the close/nav/rail controls are position:fixed to the viewport so they stay reachable no matter how far down the (potentially very long) card you've scrolled. */ .rp-modal-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(2,8,23,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px; overflow-y: auto; animation: rp-fade-in var(--rp-dur) var(--rp-ease) both; overscroll-behavior: contain; } .rp-modal-overlay.is-closing { animation: rp-fade-out var(--rp-dur-fast) var(--rp-ease-in) both; } /* Frame lays the panel and the action rail out side by side so the rail can sit just beside the card (not off at the viewport's edge) and stick to it via position:sticky as the overlay scrolls. */ .rp-modal-frame { position: relative; width: 100%; max-width: 1040px; display: flex; align-items: flex-start; gap: 16px; } .rp-modal-panel { position: relative; background: var(--rp-bg); border-radius: var(--rp-r-xl); width: 100%; max-width: 960px; flex: 1 1 auto; min-width: 0; overflow: hidden; box-shadow: var(--rp-shadow-xl); animation: rp-slide-up var(--rp-dur-slow) var(--rp-ease) both; } .rp-modal-overlay.is-closing .rp-modal-panel { animation: rp-slide-down var(--rp-dur-fast) var(--rp-ease-in) both; } /* Solid dark glass background (not just a faint tint) so close/nav stay legible whether they're sitting over the dark hero or content that has scrolled underneath them. Fixed (not absolute) so they stay put as the long card scrolls past underneath. */ .rp-modal-close { position: fixed; top: 24px; right: 24px; z-index: 100001; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--rp-dur), transform var(--rp-dur); } .rp-modal-close:hover { background: rgba(15,23,42,.78); transform: scale(1.08); } .rp-modal-nav { position: fixed; top: 50%; z-index: 10; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(15,23,42,.55); backdrop-filter: blur(8px); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.2); transition: all var(--rp-dur) var(--rp-ease); } .rp-modal-nav:hover { background: rgba(15,23,42,.78); transform: translateY(-50%) scale(1.08); } .rp-modal-nav[disabled] { opacity: .25; cursor: default; } .rp-modal-nav[disabled]:hover { transform: translateY(-50%); background: rgba(15,23,42,.55); } .rp-modal-nav--prev { left: 24px; } .rp-modal-nav--next { right: 24px; } @media (max-width: 1100px) { .rp-modal-nav { display: none; } } /* Behance-style floating action rail — laid out as a flex sibling right next to the panel (see .rp-modal-frame) and sticky so it travels with the panel as the overlay scrolls, instead of floating at the viewport edge. */ .rp-modal-rail { position: sticky; top: 24px; z-index: 100001; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .rp-modal-rail__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rp-border); background: var(--rp-bg); display: flex; align-items: center; justify-content: center; color: var(--rp-text-2); cursor: pointer; box-shadow: var(--rp-shadow-sm); transition: all var(--rp-dur-fast) var(--rp-ease); text-decoration: none; position: relative; } .rp-modal-rail__btn:hover { color: var(--rp-accent); border-color: var(--rp-accent); transform: translateY(-2px); box-shadow: var(--rp-shadow-md); } .rp-modal-rail__btn.is-liked { color: #ef4444; border-color: #fecaca; background: #fef2f2; } .rp-modal-rail__btn[disabled] { opacity: .4; cursor: default; pointer-events: none; } .rp-modal-rail__label { position: absolute; right: 54px; top: 50%; transform: translateY(-50%) translateX(6px); background: var(--rp-text-1); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--rp-r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--rp-dur-fast), transform var(--rp-dur-fast); } .rp-modal-rail__btn:hover .rp-modal-rail__label { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 1180px) { .rp-modal-frame { flex-direction: column; align-items: center; } .rp-modal-rail { position: static; flex-direction: row; order: -1; margin: 0 0 4px; } .rp-modal-rail__label { display: none; } } /* Share popover */ .rp-share-pop { position: absolute; z-index: 100000; min-width: 190px; background: var(--rp-bg); border: 1px solid var(--rp-border); border-radius: var(--rp-r-md); box-shadow: var(--rp-shadow-lg); padding: 6px; animation: rp-fade-in var(--rp-dur-fast) var(--rp-ease) both; } .rp-share-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: var(--rp-r-sm); font-size: 13px; font-weight: 500; color: var(--rp-text-1); text-decoration: none; cursor: pointer; text-align: left; font-family: var(--rp-font); } .rp-share-pop__item:hover { background: var(--rp-surface); color: var(--rp-accent); } /* Modal image hero */ .rp-modal-hero { position: relative; background: #0f172a; flex-shrink: 0; max-height: 50vh; overflow: hidden; } .rp-modal-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 600ms var(--rp-ease); } .rp-modal-hero:hover img { transform: scale(1.05); } .rp-modal-hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to bottom, transparent, rgba(15,23,42,.85)); pointer-events: none; } /* The panel grows to its natural content height and the overlay (not this wrapper) provides the scroll, so #rp-modal-inner/.rp-modal-body need no flex or overflow rules — they just stack normally inside the long card. */ #rp-modal-inner { display: block; } .rp-modal-body { overflow: visible; } .rp-modal-content { padding: 28px 32px 36px; } @media (max-width: 640px) { .rp-modal-content { padding: 20px 20px 28px; } } /* Modal header */ .rp-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .rp-modal-title { font-family: var(--rp-font-display); font-size: 22px; font-weight: 700; color: var(--rp-text-1); letter-spacing: -.02em; line-height: 1.2; } .rp-modal-actions { display: flex; gap: 8px; flex-shrink: 0; } .rp-modal-excerpt { font-size: 14px; color: var(--rp-text-3); line-height: 1.65; margin-bottom: 20px; } /* Modal stats */ .rp-modal-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; margin-bottom: 22px; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-r-md); padding: 16px; } .rp-modal-stat-value { font-family: var(--rp-font-display); font-size: 22px; font-weight: 800; color: var(--rp-accent); display: block; line-height: 1; } .rp-modal-stat-label { font-size: 11px; font-weight: 600; color: var(--rp-text-2); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; } /* Case study layout in modal */ .rp-modal-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .rp-modal-cs-block { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-r-md); padding: 16px; border-top: 3px solid var(--rp-accent); } .rp-modal-cs-block__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rp-accent); margin-bottom: 6px; } .rp-modal-cs-block__text { font-size: 13px; color: var(--rp-text-2); line-height: 1.55; } @media (max-width: 640px) { .rp-modal-cs-grid { grid-template-columns: 1fr; } } /* Detail row */ .rp-modal-details { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-top: 16px; border-top: 1px solid var(--rp-border); } .rp-modal-detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rp-text-4); } .rp-modal-detail-value { font-size: 13px; font-weight: 600; color: var(--rp-text-1); margin-top: 2px; } /* Shared section label used by the modal's full-site preview + comments blocks */ .rp-modal-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rp-text-4); margin: 24px 0 12px; } /* Full-length website screenshot — web-dev modal only. Flows in the modal's single scroll region rather than opening its own nested scrollbar. */ .rp-modal-fullsite__scroll { border-radius: var(--rp-r-md); border: 1px solid var(--rp-border); box-shadow: var(--rp-shadow-sm); overflow: hidden; } .rp-modal-fullsite__scroll img { display: block; width: 100%; height: auto; } /* Modal comments — fetched/posted via AJAX, no page navigation */ .rp-modal-comments { padding-top: 16px; border-top: 1px solid var(--rp-border); margin-top: 8px; } .rp-modal-comments__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .rp-modal-comments__loading, .rp-modal-comments__empty { font-size: 13px; color: var(--rp-text-4); } .rp-modal-comment { display: flex; gap: 10px; align-items: flex-start; } .rp-modal-comment__avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--rp-accent-tint); color: var(--rp-accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .rp-modal-comment__body { flex: 1; min-width: 0; } .rp-modal-comment__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .rp-modal-comment__meta strong { font-size: 13px; color: var(--rp-text-1); } .rp-modal-comment__meta span { font-size: 11px; color: var(--rp-text-4); } .rp-modal-comment__text { font-size: 13px; color: var(--rp-text-2); line-height: 1.55; } .rp-modal-comments__form { display: flex; flex-direction: column; gap: 8px; } .rp-modal-comments__input { width: 100%; padding: 9px 12px; border: 1px solid var(--rp-border); border-radius: var(--rp-r-sm); font-size: 13px; font-family: var(--rp-font); color: var(--rp-text-1); resize: vertical; } .rp-modal-comments__input:focus { outline: none; border-color: var(--rp-accent); } .rp-modal-comments__form-row { display: flex; gap: 8px; flex-wrap: wrap; } .rp-modal-comments__form-row .rp-modal-comments__input { flex: 1; min-width: 140px; } .rp-modal-comments__error { font-size: 12px; color: #ef4444; margin: 0; } /* Modal footer nav */ .rp-modal-footer-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; border-top: 1px solid var(--rp-border); background: var(--rp-surface); flex-shrink: 0; } .rp-modal-footer-nav-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--rp-text-3); background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: var(--rp-r-sm); transition: color var(--rp-dur), background var(--rp-dur); } .rp-modal-footer-nav-btn:hover { color: var(--rp-accent); background: var(--rp-accent-tint); } .rp-modal-footer-nav-btn[disabled] { opacity: .3; cursor: default; } .rp-modal-footer-nav-btn[disabled]:hover { color: var(--rp-text-3); background: none; } .rp-modal-footer-counter { font-size: 12px; color: var(--rp-text-4); } /* ── Password modal ─────────────────────────────────────────── */ .rp-pw-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(2,8,23,.7); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: rp-fade-in var(--rp-dur) var(--rp-ease) both; } .rp-pw-panel { background: var(--rp-bg); border-radius: var(--rp-r-xl); padding: 40px 36px; width: 100%; max-width: 400px; text-align: center; box-shadow: var(--rp-shadow-xl); animation: rp-slide-up var(--rp-dur) var(--rp-ease) both; } .rp-pw-icon { font-size: 36px; margin-bottom: 14px; } .rp-pw-title { font-family: var(--rp-font-display); font-size: 20px; font-weight: 700; color: var(--rp-text-1); margin-bottom: 8px; } .rp-pw-hint { font-size: 14px; color: var(--rp-text-3); margin-bottom: 24px; } .rp-pw-input { width: 100%; padding: 12px 16px; text-align: center; letter-spacing: .15em; border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-md); font-size: 16px; font-family: var(--rp-font); color: var(--rp-text-1); outline: none; transition: border-color var(--rp-dur), box-shadow var(--rp-dur); margin-bottom: 8px; } .rp-pw-input:focus { border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-tint); } .rp-pw-input.is-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); animation: rp-shake .3s; } .rp-pw-error { font-size: 12px; color: #ef4444; margin-bottom: 16px; min-height: 16px; } .rp-pw-actions { display: flex; flex-direction: column; gap: 8px; } /* ── "Available for hire" sticky bar ───────────────────────────── */ .rp-hirebar { /* Above the quick-view modal overlay (99998) and hire form overlay (99999) so the pill stays reachable even while a modal is open and scrolled. */ position: fixed; left: 50%; bottom: 28px; z-index: 100010; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--rp-text-1); color: #fff; padding: 10px 12px 10px 14px; border-radius: var(--rp-r-full); box-shadow: var(--rp-shadow-xl); animation: rp-hirebar-in .5s var(--rp-ease) both; max-width: calc(100vw - 32px); } @keyframes rp-hirebar-in { from { opacity:0; transform: translateX(-50%) translateY(16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } } .rp-hirebar__avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--rp-accent); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .rp-hirebar__avatar--photo { object-fit: cover; background: none; } .rp-hirebar__text { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; } .rp-hirebar__text strong { font-size: 13px; font-weight: 700; } .rp-hirebar__text span { font-size: 12px; color: rgba(255,255,255,.65); } .rp-hirebar__cta { padding: 8px 18px; font-size: 13px; flex-shrink: 0; } .rp-hirebar__close { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: none; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--rp-dur-fast); } .rp-hirebar__close:hover { background: rgba(255,255,255,.22); color: #fff; } @media (max-width: 560px) { .rp-hirebar { left: 16px; right: 16px; bottom: 16px; transform: none; max-width: none; } .rp-hirebar__text span { display: none; } } /* ── Hire / "Work With Us" modal ─────────────────────────────── */ .rp-hire-overlay:not([hidden]) { position: fixed; inset: 0; z-index: 99999; background: rgba(13,13,13,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; overflow-y: auto; overscroll-behavior: contain; animation: rp-fade-in var(--rp-dur) var(--rp-ease) both; } .rp-hire-overlay.is-closing { animation: rp-fade-out var(--rp-dur-fast) var(--rp-ease-in) both; } .rp-hire-panel { background: var(--rp-bg); border-radius: var(--rp-r-xl); width: 100%; max-width: 540px; overflow: hidden; box-shadow: var(--rp-shadow-xl); border: 1px solid var(--rp-border); animation: rp-slide-up var(--rp-dur) var(--rp-ease) both; margin: auto 0; } .rp-hire-overlay.is-closing .rp-hire-panel { animation: rp-slide-down var(--rp-dur-fast) var(--rp-ease-in) both; } .rp-hire-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 32px 22px; border-bottom: 1px solid var(--rp-border); } .rp-hire-panel__title { font-family: var(--rp-font-display); font-size: 21px; font-weight: 700; color: var(--rp-text-1); letter-spacing: -.02em; } .rp-hire-panel__subtitle { font-size: 13px; color: var(--rp-text-3); margin-top: 3px; } .rp-hire-close { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--rp-r-sm); background: var(--rp-surface-2); border: 1px solid var(--rp-border); display: flex; align-items: center; justify-content: center; color: var(--rp-text-2); cursor: pointer; } .rp-hire-form { padding: 24px 32px 28px; } .rp-hire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 13px; } .rp-hire-field { margin-bottom: 16px; } .rp-hire-field label { display: block; font-size: 11px; font-weight: 600; color: var(--rp-text-4); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; } .rp-hire-input { width: 100%; height: 42px; padding: 0 13px; background: var(--rp-surface-2); border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-sm); font-family: var(--rp-font); font-size: 14px; color: var(--rp-text-1); transition: border-color var(--rp-dur-fast); } .rp-hire-input:focus { outline: none; border-color: var(--rp-accent); } textarea.rp-hire-input { height: auto; padding: 10px 13px; resize: vertical; } select.rp-hire-input { cursor: pointer; } .rp-hire-error { font-size: 12px; color: #ef4444; margin: -4px 0 12px; } #rp-hire-submit .rp-spinner { display: none; } #rp-hire-submit.is-loading .rp-spinner { display: inline-block; } #rp-hire-submit.is-loading { pointer-events: none; opacity: .75; } .rp-hire-success { text-align: center; padding: 6px 0 0; } .rp-hire-success__icon { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .rp-hire-success p { font-size: 14px; font-weight: 600; color: var(--rp-text-1); } @media (max-width: 480px) { .rp-hire-grid { grid-template-columns: 1fr; gap: 0; } .rp-hire-panel__header, .rp-hire-form { padding-left: 22px; padding-right: 22px; } } /* ── Empty state ─────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-empty-state { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: rp-fade-in var(--rp-dur) var(--rp-ease) both; } .rock-portfolio-wrap .rp-empty-icon { width: 56px; height: 56px; border-radius: var(--rp-r-md); background: var(--rp-surface); display: flex; align-items: center; justify-content: center; color: var(--rp-text-4); } .rock-portfolio-wrap .rp-empty-state h3 { font-size: 16px; font-weight: 600; color: var(--rp-text-1); } .rock-portfolio-wrap .rp-empty-state p { font-size: 14px; color: var(--rp-text-3); } .rock-portfolio-wrap .rp-reset-filter { background: none; border: none; color: var(--rp-accent); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline; } /* ── Skeleton ────────────────────────────────────────────────── */ .rock-portfolio-wrap .rp-card--skeleton { pointer-events: none; } .rock-portfolio-wrap .rp-skel { background: linear-gradient(90deg, var(--rp-surface) 25%, var(--rp-surface-2) 50%, var(--rp-surface) 75%); background-size: 200% 100%; animation: rp-shimmer 1.5s infinite; border-radius: 6px; } .rock-portfolio-wrap .rp-skel-thumb { width: 100%; aspect-ratio: 16/10; border-radius: 0; } .rock-portfolio-wrap .rp-skel-line { height: 14px; width: 100%; margin-bottom: 8px; } .rock-portfolio-wrap .rp-skel-line--title { height: 20px; width: 75%; margin-bottom: 10px; } .rock-portfolio-wrap .rp-skel-line--sm { height: 11px; width: 50%; } /* ── Load more / pagination ─────────────────────────────────── */ .rock-portfolio-wrap .rp-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 40px 0 0; flex-wrap: wrap; } .rock-portfolio-wrap .rp-load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-full); background: var(--rp-bg); color: var(--rp-text-2); font-size: 14px; font-weight: 500; font-family: var(--rp-font); cursor: pointer; transition: all var(--rp-dur) var(--rp-ease); } .rock-portfolio-wrap .rp-load-more-btn:hover { border-color: var(--rp-accent); color: var(--rp-accent); transform: translateY(-2px); box-shadow: var(--rp-shadow-sm); } .rock-portfolio-wrap .rp-load-more-btn.is-loading { pointer-events: none; opacity: .7; } .rock-portfolio-wrap .rp-load-more-btn.is-loading .rp-spinner { display: inline-block; } .rock-portfolio-wrap .rp-load-more-count { font-size: 12px; color: var(--rp-text-4); } /* Infinite scroll sentinel */ .rock-portfolio-wrap .rp-scroll-sentinel { height: 1px; } .rock-portfolio-wrap .rp-end-of-results { font-size: 13px; color: var(--rp-text-4); text-align: center; padding: 32px 0; display: flex; align-items: center; gap: 10px; justify-content: center; } .rock-portfolio-wrap .rp-end-of-results::before, .rock-portfolio-wrap .rp-end-of-results::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: var(--rp-border); } /* Spinner */ .rock-portfolio-wrap .rp-spinner, .rp-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: none; animation: rp-spin .7s linear infinite; flex-shrink: 0; } /* ── Entrance animations ─────────────────────────────────────── */ .rock-portfolio-wrap .rp-card[data-anim] { transition-property: opacity, transform; transition-duration: 450ms; transition-timing-function: var(--rp-ease); } .rock-portfolio-wrap .rp-card[data-anim="fade"] { opacity: 0; } .rock-portfolio-wrap .rp-card[data-anim="fade-up"] { opacity: 0; transform: translateY(24px); } .rock-portfolio-wrap .rp-card[data-anim="scale"] { opacity: 0; transform: scale(.94); } .rock-portfolio-wrap .rp-card[data-anim].is-visible { opacity: 1; transform: none; } .rock-portfolio-wrap .rp-card.rp-hiding { opacity: 0; transform: scale(.96); transition: opacity 180ms, transform 180ms; pointer-events: none; } /* ── Image protection ────────────────────────────────────────── */ .rock-portfolio-wrap.rp-protect img { pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ── Keyframes ──────────────────────────────────────────────── */ @keyframes rp-fade-in { from{opacity:0} to{opacity:1} } @keyframes rp-fade-out { from{opacity:1} to{opacity:0} } @keyframes rp-slide-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes rp-slide-down { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(12px)} } @keyframes rp-shimmer { from{background-position:200% 0} to{background-position:-200% 0} } @keyframes rp-spin { to{transform:rotate(360deg)} } @keyframes rp-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce) { .rock-portfolio-wrap .rp-card, .rock-portfolio-wrap .rp-card__thumb, .rp-modal-panel, .rp-modal-overlay, .rp-pw-panel, .rp-pw-overlay { animation:none !important; transition:none !important; } .rock-portfolio-wrap .rp-card[data-anim] { opacity:1; transform:none; } .rock-portfolio-wrap .rp-skel, .rock-portfolio-wrap .rp-card__thumb-wrap::before { animation:none; background:var(--rp-surface-2); } } /* ── Focus visible ───────────────────────────────────────────── */ .rock-portfolio-wrap .rp-filter-btn:focus-visible, .rock-portfolio-wrap .rp-btn:focus-visible, .rock-portfolio-wrap .rp-card:focus-visible, .rp-modal-close:focus-visible, .rp-modal-nav:focus-visible { outline:2px solid var(--rp-accent); outline-offset:2px; } /* ──────────────────────────────────────────────────────────── SINGLE PROJECT PAGE ──────────────────────────────────────────────────────────── */ /* Full-width wrap override */ .rock-portfolio-wrap.rp-single-wrap { max-width: 100%; padding: 0; } /* Hide theme title on portfolio pages */ .single-portfolio .entry-title, .single-portfolio .page-title, .single-portfolio .post-title, .single-portfolio h1.wp-block-post-title, .single-portfolio header.entry-header { display: none !important; } /* Hero banner — fixed-height, cropped to the top of the image (Behance-style cover banner) */ .rp-single__hero-outer { position: relative; background: #0f172a; width: 100%; overflow: hidden; height: 56vh; min-height: 380px; max-height: 620px; } .rp-single__hero-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; } /* Full project preview — shown at true, unscaled size further down the page */ .rp-single__preview { margin: 8px 0 40px; } .rp-single__preview-img { display: block; width: 100%; height: auto; object-fit: unset; border-radius: var(--rp-r-lg); box-shadow: var(--rp-shadow-md); } .rp-single__preview-img--framed { border-radius: 0 0 var(--rp-r-lg) var(--rp-r-lg); box-shadow: none; } /* Hero gradient + overlay */ .rp-single__hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(10,17,35,.82)); } /* Centered, Behance-style hero for graphics/creative projects — full-height, radial-vignette background with the title centered over it instead of bottom-anchored. */ .rp-single__hero-outer--centered { height: 78vh; min-height: 480px; max-height: 760px; } .rp-single__hero-outer--centered .rp-single__hero-img { object-position: center center; filter: blur(2px) brightness(.7); transform: scale(1.04); } .rp-single__hero-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(10,17,35,.25) 0%, rgba(10,17,35,.78) 78%); } .rp-single__hero-outer--centered .rp-single__hero-gradient { display: none; } .rp-single__hero-content--centered { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; } .rp-single__hero-content--centered .rp-single__hero-meta { justify-content: center; } .rp-single__hero-content--centered .rp-single__hero-title { margin-bottom: 22px; } .rp-single__hero-content--centered .rp-single__hero-actions { justify-content: center; } /* Hero bottom content */ .rp-single__hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 48px; z-index: 2; color: #fff; } @media (max-width: 768px) { .rp-single__hero-content { padding: 24px 20px; } } .rp-single__hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .rp-single__hero-tag { display: inline-flex; padding: 3px 10px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); border-radius: var(--rp-r-full); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; } .rp-single__hero-year { font-size: 12px; color: rgba(255,255,255,.6); } .rp-single__hero-title { font-family: var(--rp-font-display); font-size: clamp(26px, 4.5vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; margin-bottom: 14px; text-shadow: 0 2px 20px rgba(0,0,0,.3); } .rp-single__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ── Single page inner container ────────────────────────────── */ .rp-single__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px 80px; } @media (max-width: 768px) { .rp-single__inner { padding: 0 20px 60px; } } /* Breadcrumb */ .rp-single__breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rp-text-4); padding: 24px 0 0; flex-wrap: wrap; } .rp-single__breadcrumb a { color: var(--rp-text-4); text-decoration: none; transition: color var(--rp-dur-fast); } .rp-single__breadcrumb a:hover { color: var(--rp-accent); } .rp-single__breadcrumb [aria-current="page"] { color: var(--rp-text-2); font-weight: 500; } /* Social proof row */ .rp-single__social-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--rp-border); margin-bottom: 40px; } .rp-like-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: none; border: 1.5px solid var(--rp-border); border-radius: var(--rp-r-full); color: var(--rp-text-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--rp-dur) var(--rp-ease); user-select: none; font-family: var(--rp-font); } .rp-like-btn .rp-like-icon { width: 18px; height: 18px; } .rp-like-btn:hover { border-color:#ef4444; color:#ef4444; background:#fef2f2; } .rp-like-btn.is-liked { border-color:#ef4444; color:#ef4444; background:#fef2f2; } @keyframes rp-heart { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 70%{transform:scale(.9)} 100%{transform:scale(1)} } .rp-like-btn.is-liked .rp-like-icon { animation: rp-heart .35s var(--rp-ease-spring); } .rp-like-btn:disabled { opacity:.6; cursor:wait; } .rp-view-count { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--rp-text-2); padding: 9px 14px; border-radius: var(--rp-r-full); background: var(--rp-surface-2); } .rp-view-count .rp-icon { width: 18px; height: 18px; color: var(--rp-text-3); } .rp-view-count__num { font-weight: 700; color: var(--rp-text-1); } .rp-comment-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--rp-text-4); text-decoration: none; transition: color var(--rp-dur-fast); } .rp-comment-count:hover { color: var(--rp-accent); } .rp-comment-count__num { font-weight: 600; color: var(--rp-text-3); } .rp-social-row__share { margin-left: auto; } .rp-btn--sm { padding: 6px 12px; font-size: 13px; } /* Stats section */ .rp-single__stats { margin-bottom: 48px; } .rp-single__section-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rp-text-4); margin-bottom: 16px; } .rp-single__stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; } .rp-single__stat-card { background: var(--rp-bg); border: 1px solid var(--rp-border); border-radius: var(--rp-r-md); padding: 22px 18px; text-align: center; position: relative; overflow: hidden; } .rp-single__stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--rp-accent); } .rp-single__stat-value { font-family: var(--rp-font-display); display:block; font-size:30px; font-weight:800; color:var(--rp-accent); line-height:1; margin-bottom:6px; letter-spacing:-.02em; } .rp-single__stat-label { font-size:12px; font-weight:600; color:var(--rp-text-2); text-transform:uppercase; letter-spacing:.05em; } /* Body layout */ .rp-single__body { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; } @media (max-width: 960px) { .rp-single__body { grid-template-columns:1fr; gap:32px; } } /* Prose */ .rp-single__prose { font-size:16px; line-height:1.8; color:var(--rp-text-2); } .rp-single__prose h2 { font-size:22px; font-weight:700; color:var(--rp-text-1); margin:2em 0 .6em; letter-spacing:-.02em; } .rp-single__prose h3 { font-size:18px; font-weight:650; color:var(--rp-text-1); margin:1.6em 0 .5em; } .rp-single__prose p { margin-bottom:1.2em; } .rp-single__prose a { color:var(--rp-accent); text-underline-offset:3px; } .rp-single__prose img { max-width:100%; height:auto; border-radius:var(--rp-r-md); margin:1.5em 0; display:block; } .rp-single__prose ul, .rp-single__prose ol { padding-left:1.4em; margin-bottom:1.2em; } .rp-single__prose li { margin-bottom:.4em; } .rp-single__prose blockquote { border-left: 3px solid var(--rp-accent); margin: 1.5em 0; padding: .5em 1.2em; color: var(--rp-text-3); background: var(--rp-accent-tint); border-radius: 0 var(--rp-r-sm) var(--rp-r-sm) 0; } /* Case study blocks */ .rp-cs-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0; } .rp-cs-block { background:var(--rp-surface); border:1px solid var(--rp-border); border-radius:var(--rp-r-md); padding:20px; border-top:3px solid var(--rp-accent); } .rp-cs-block__label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rp-accent); margin-bottom:8px; } .rp-cs-block__text { font-size:14px; color:var(--rp-text-2); line-height:1.6; } @media (max-width:640px) { .rp-cs-blocks { grid-template-columns:1fr; } } /* BA section */ .rp-single__ba { margin-top:36px; } .rp-single__ba .rp-ba-slider { aspect-ratio:16/9; } /* Graphics gallery */ .rp-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:16px; } .rp-gallery-item { position:relative; overflow:hidden; border-radius:var(--rp-r-md); cursor:zoom-in; background:var(--rp-surface); aspect-ratio:4/3; } .rp-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--rp-ease); } .rp-gallery-item:hover img { transform:scale(1.06); } .rp-gallery-item__overlay { position:absolute; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--rp-dur); color:#fff; font-size:20px; } .rp-gallery-item:hover .rp-gallery-item__overlay { opacity:1; } /* Mosaic gallery (graphics/branding) — one large tile, then a 2x2 grid of smaller tiles, repeating in groups of 5. */ .rp-gallery-grid--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; } .rp-gallery-grid--mosaic .rp-gallery-item { aspect-ratio: 1/1; } .rp-gallery-grid--mosaic .rp-gallery-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; } @media (max-width: 640px) { .rp-gallery-grid--mosaic { grid-template-columns: repeat(2, 1fr); } .rp-gallery-grid--mosaic .rp-gallery-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; } } /* What we changed (before/after) */ .rp-single__changed { margin-top: 40px; } .rp-changed-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .rp-changed-list__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--rp-text-2); line-height: 1.5; } .rp-changed-list__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--rp-accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Sidebar */ .rp-single__sidebar { display:flex; flex-direction:column; gap:16px; position:sticky; top:24px; } .rp-sidebar-card { background:var(--rp-bg); border:1px solid var(--rp-border); border-radius:var(--rp-r-md); padding:20px; } .rp-sidebar-card--cta { background:linear-gradient(135deg, var(--rp-accent), var(--rp-accent-dark)); border:none; position:relative; overflow:hidden; padding:24px; } .rp-sidebar-card--cta::before { content:''; position:absolute; top:-28px; right:-28px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none; } .rp-sidebar-card__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--rp-text-4); margin-bottom:14px; } .rp-detail-list { display:flex; flex-direction:column; } .rp-detail-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--rp-border); } .rp-detail-row:last-child { border-bottom:none; padding-bottom:0; } .rp-detail-row dt { font-size:12px; color:var(--rp-text-4); font-weight:500; } .rp-detail-row dd { font-size:13px; color:var(--rp-text-1); font-weight:600; text-align:right; } .rp-sidebar-skills { display:flex; flex-wrap:wrap; gap:6px; } .rp-sidebar-cta-headline { font-family: var(--rp-font-display); font-size:17px; font-weight:800; color:#fff; margin-bottom:7px; position:relative; letter-spacing:-.01em; } .rp-sidebar-cta-text { font-size:13px; font-weight:500; color:rgba(255,255,255,.75); line-height:1.55; margin-bottom:18px; position:relative; } .rp-sidebar-card--cta .rp-btn--full { position:relative; } /* Deliverables checklist card (graphics/branding) */ .rp-deliverables-list { display: flex; flex-direction: column; gap: 10px; } .rp-deliverables-list__item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--rp-text-2); line-height: 1.45; } .rp-deliverables-list__check { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--rp-accent-light, rgba(99,102,241,.12)); color: var(--rp-accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Gated case-study PDF card (marketing) */ .rp-pdf-gate__text { font-size: 13px; color: var(--rp-text-3); line-height: 1.55; margin-bottom: 14px; } .rp-pdf-gate__form .rp-hire-input { margin-bottom: 0; } .rp-pdf-gate__error { font-size: 12px; color: #ef4444; margin: 8px 0 0; } .rp-pdf-gate__success { text-align: center; } .rp-pdf-gate__success p { font-size: 13px; font-weight: 600; color: var(--rp-text-1); margin-bottom: 12px; } /* Project nav */ .rp-project-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid var(--rp-border); padding-top:40px; margin-top:48px; } .rp-project-nav__btn { display:flex; flex-direction:column; gap:4px; padding:16px 20px; border:1.5px solid var(--rp-border); border-radius:var(--rp-r-md); text-decoration:none !important; transition:all var(--rp-dur) var(--rp-ease); background:var(--rp-bg); } .rp-project-nav__btn:hover { border-color:var(--rp-accent); background:var(--rp-accent-tint); transform:translateY(-2px); } .rp-project-nav__btn--next { text-align:right; } .rp-project-nav__dir { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--rp-text-4); } .rp-project-nav__title { font-size:14px; font-weight:600; color:var(--rp-text-1); } /* Related */ .rp-related { border-top:1px solid var(--rp-border); padding-top:48px; margin-top:48px; } .rp-related__title { font-family: var(--rp-font-display); font-size:20px; font-weight:700; color:var(--rp-text-1); letter-spacing:-.02em; margin-bottom:24px; } .rp-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:900px) { .rp-related-grid { grid-template-columns:1fr 1fr; } } @media (max-width:580px) { .rp-related-grid { grid-template-columns:1fr; } } .rp-related-card { text-decoration:none !important; display:block; } .rp-related-card .rp-card { pointer-events:none; } .rp-related-card:hover .rp-card { pointer-events:auto; } /* Comments */ .rp-single__comments { border-top:1px solid var(--rp-border); padding-top:48px; margin-top:48px; } .rp-single__comments .comments-title, .rp-single__comments .comment-reply-title { font-family: var(--rp-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--rp-text-1); margin: 0 0 24px; } .rp-single__comments .comment-reply-title small { font-size: 13px; font-weight: 500; margin-left: 8px; } .rp-single__comments .comment-reply-title small a { color: var(--rp-text-3); } .rp-single__comments .comment-list { list-style:none; margin: 0 0 8px; padding: 0; } .rp-single__comments .comment-list .children { list-style:none; margin: 0; padding-left: 44px; } .rp-single__comments li.comment, .rp-single__comments li.pingback { margin: 0; } .rp-single__comments .comment-body { padding:20px 0; border-bottom:1px solid var(--rp-border); } .rp-single__comments .comment-list > li:first-child > .comment-body { padding-top: 4px; } .rp-single__comments .comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .rp-single__comments .comment-author .avatar { width: 38px; height: 38px; border-radius: 50%; display: block; flex-shrink: 0; } .rp-single__comments .comment-author .fn { font-style: normal; font-weight: 700; font-size: 14px; color: var(--rp-text-1); } .rp-single__comments .comment-author .says { display: none; } .rp-single__comments .comment-metadata { margin-bottom: 10px; margin-left: 48px; } .rp-single__comments .comment-metadata a { font-size: 12px; color: var(--rp-text-4); text-decoration: none; } .rp-single__comments .comment-metadata a:hover { color: var(--rp-accent); } .rp-single__comments .comment-awaiting-moderation { display: block; margin-left: 48px; font-size: 12px; font-style: italic; color: var(--rp-text-3); } .rp-single__comments .comment-content { margin-left: 48px; font-size: 14px; line-height: 1.7; color: var(--rp-text-2); } .rp-single__comments .comment-content p { margin: 0 0 10px; } .rp-single__comments .comment-content p:last-child { margin-bottom: 0; } .rp-single__comments .reply { margin-left: 48px; margin-top: 10px; } .rp-single__comments .comment-reply-link, .rp-single__comments .comment-edit-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--rp-accent); text-decoration: none; cursor: pointer; } .rp-single__comments .comment-reply-link:hover, .rp-single__comments .comment-edit-link:hover { color: var(--rp-accent-dark); } .rp-single__comments .no-comments { font-size: 14px; color: var(--rp-text-3); padding: 16px 0; } /* Comment form */ .rp-single__comments #respond { margin-top: 32px; } .rp-single__comments .comment-notes, .rp-single__comments .logged-in-as { font-size: 13px; color: var(--rp-text-3); margin-bottom: 18px; } .rp-single__comments .logged-in-as a { color: var(--rp-accent); } .rp-single__comments .comment-form p { margin: 0 0 16px; } .rp-single__comments .comment-form label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rp-text-3); margin-bottom: 6px; } .rp-single__comments .comment-form input[type="text"], .rp-single__comments .comment-form input[type="email"], .rp-single__comments .comment-form input[type="url"], .rp-single__comments .comment-form textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 14px; font-family: var(--rp-font); color: var(--rp-text-1); background: var(--rp-bg); border: 1px solid var(--rp-border); border-radius: var(--rp-r-md); transition: border-color var(--rp-dur-fast), box-shadow var(--rp-dur-fast); } .rp-single__comments .comment-form textarea { min-height: 130px; resize: vertical; } .rp-single__comments .comment-form input:focus, .rp-single__comments .comment-form textarea:focus { outline: none; border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-tint); } .rp-single__comments .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; } .rp-single__comments .comment-form-cookies-consent label { margin: 0; text-transform: none; font-weight: 500; } .rp-single__comments .form-submit { margin: 4px 0 0; } .rp-single__comments .form-submit #submit, .rp-single__comments .form-submit input[type="submit"] { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 700; color: #fff; background: var(--rp-accent); border: none; border-radius: var(--rp-r-md); cursor: pointer; font-family: var(--rp-font); transition: background var(--rp-dur-fast), transform var(--rp-dur-fast); } .rp-single__comments .form-submit #submit:hover, .rp-single__comments .form-submit input[type="submit"]:hover { background: var(--rp-accent-dark); } @media (max-width: 560px) { .rp-single__comments .comment-metadata, .rp-single__comments .comment-content, .rp-single__comments .reply, .rp-single__comments .comment-awaiting-moderation { margin-left: 0; } .rp-single__comments .comment-list .children { padding-left: 20px; } }