/* The redesign's look on the site's other pages (layout arcfolio_new; Controller::useSiteRedesign, params siteRedesign). * Loaded after styles.css and home-redesign.css. The pages keep their layout: type, colours, buttons and form fields * take the homepage's (home-redesign.css :root). Pages redone as a whole use the homepage's own .hr-* classes. */ /* the old palette in the new colours first, so the rules after it can still adjust */ /* ---- colours: generated by site-redesign-colors.py from styles.css, do not edit by hand ---- */ .text-gray-1 { color: #717171; } .text-red { color: #bb344c; } .bg-light-gray { background: #f7f7f7; } .bg-light-red { background: #f8eced; } .bg-red { background: #bb344c; } .file-field { background: #f7f7f7; } .file-field p { color: #717171; } .form-group label { color: #717171; } .form-group label sup { color: #bb344c; } .form-group .form-control { background: #f7f7f7; } .custom-checkbox label span, .custom-radio label span { background: #f7f7f7; } .custom-checkbox label input:checked + span, .custom-radio label input:checked + span { border-color: #bb344c; background: #bb344c; } .custom-checkbox a, .custom-radio a { color: #bb344c; } @media (max-width: 767px) { .custom-checkbox, .custom-radio { background: #f7f7f7; } } .custom-radio label input:checked + span { border-color: #bb344c; background: #f7f7f7; } .custom-radio label input:checked + span:after { background: #bb344c; } ul.ul-2 li a { color: #bb344c; } .table-wrap table tr td a { color: #bb344c; } .inline-edit-text textarea { background: #f7f7f7; } .inline-edit-text button[type="submit"] { background: #bb344c; border-color: #bb344c; } .inline-edit-text button[type="submit"]:hover { background: #a82b42; border-color: #a82b42; } .inline-edit-text button[type="cancel"] { color: #bb344c !important; } .your-style-slider .ui-slider-handle, .your-style-slider-2 .ui-slider-handle { background: #bb344c; } .your-style-slider-2 .ui-widget { background: #f8eced; } .btn-primary { background: #bb344c; border-color: #bb344c; } .btn-primary:active, .btn-primary:focus { background: #bb344c; border-color: #bb344c; } .btn-primary:hover { background: #a82b42; border-color: #a82b42; } .btn-primary.disabled { background: #bb344c; border-color: #bb344c; } .btn-primary:disabled { background: #bb344c; border-color: #bb344c; } .btn-secondary { color: #bb344c !important; } .btn-secondary:active, .btn-secondary:focus { color: #bb344c !important; } .btn-light:hover { background: #bb344c; border-color: #bb344c; } .btn-link:hover { color: #a82b42; } .sort-by:hover { color: #bb344c; } header .arrow { background: #f8eced; color: #bb344c; } header .top { background: #f8eced; } header .top .btn-primary:hover { background: #a82b42; border-color: #a82b42; } header > .head .menu li a:hover { color: #a82b42; } header.landing-header > .head .menu li a:hover { color: #a82b42; } header.landing-header > .head .btn.btn-link:hover { color: #a82b42; } .search-module #project-constructor .custom-text { background: #f8eced; } .search-module #project-constructor #project-constructor-menu > li:hover > a, .search-module #project-constructor #project-constructor-menu > li:hover > label { color: #bb344c !important; } .search-module #project-constructor #project-constructor-menu > li:hover .menu-header { color: #bb344c !important; } .mobile-head { background: #f8eced; } .mobile-head .btn.mobile-menu-btn { color: #bb344c !important; } .mobile-menu .role { background: #f8eced; } .mobile-menu .role .btn-primary:hover { background: #a82b42; border-color: #a82b42; } .mobile-menu .menu li a:active, .mobile-menu .menu li a:hover { color: #a82b42; } .mobile-menu .btn-back span { color: #bb344c; } .mobile-menu #mobile-menu-language .circle, .mobile-menu #mobile-menu-currency .circle { background: #bb344c; } .mobile-menu #mobile-menu-language ul li:hover, .mobile-menu #mobile-menu-currency ul li:hover { color: #bb344c; } .mobile-menu #mobile-menu-language ul li:hover a, .mobile-menu #mobile-menu-currency ul li:hover a, .mobile-menu #mobile-menu-language ul li:hover span, .mobile-menu #mobile-menu-currency ul li:hover span { color: #bb344c; } .mobile-menu #mobile-menu-language ul li:hover .circle, .mobile-menu #mobile-menu-currency ul li:hover .circle { background-color: #bb344c; } .login-signup-box .normalLink { color: #bb344c !important; } footer { background: #f7f7f7; } footer .copy { color: #717171; } footer .social a:hover { color: #a82b42; } footer .menu ul li a { color: #717171; } footer .menu ul li a:hover { color: #a82b42; } footer label { color: #717171; } .arcfolioland .voters-choice-head:hover { background: #bb344c; } .arcfolioland .list-items .item .certificate-btn:hover { background: #bb344c; } .arcfolioland .list-items .item .descr .voters-choice:hover { background: #bb344c; } .arcfolioland .list-items .item .descr .ProjResVis:hover { background: #bb344c; } .arcfolioland .list-items .item .descr .rate { color: #717171; } .arcfolioland .list-items .item .descr .author a { color: #bb344c; } .arcfolioland .list-items .item .descr .bottom .price { color: #bb344c; } .arcfolioland .list-items .item .descr .place { color: #717171; } .arcfolioland .list-items .item .descr .user a { color: #bb344c; } .project-head { background: #f7f7f7; } .project-head .img-wrapper .top-50-designer { background: #bb344c; } .project-head .info .date, .project-head .info .place, .project-head .info .phone, .project-head .info .client-general-info { color: #717171; } .project-head .info .links a { color: #717171; } .project-head .info .links a:hover { color: #bb344c; } .project-head .info .name a { color: #bb344c; } .project-head .info .award-price + div { color: #717171; } .project-head .info .award-price + div .down i { color: #bb344c; } .project-head .box-jury > ul li.voter-block .voter-block-tooltip .country { color: #717171; } .project-head .social a:hover { color: #a82b42; } .project-head .social label { color: #717171; } @media (max-width: 767px) { .project-head .info.top-designer-descr { background: #f7f7f7; } } .custom-social a:hover { color: #a82b42; } .custom-social label { color: #717171; } .arcfolioland .team-list .item .top .place { color: #717171; } .arcfolioland .team-list .item .down .btn-link { color: #bb344c; } .arcfolioland #contest-wall .entry, .arcfolioland #evaluations .entry { background: #f7f7f7; } .arcfolioland #comments .item .text { background: #f7f7f7; } .arcfolioland #comments .item .actions button { color: #bb344c; } .arcfolioland #comments .item .actions button.like.active { color: #bb344c; } .box-jury-info .items .jury-item table tr td .mail a { color: #717171; } .box-jury-info-tabs { background: #f7f7f7; } .box-jury-info-tabs ul li .item { color: #717171; } .top-designer-list .item .title .num { background: #bb344c; } .top-designer-list .item .title .country { color: #717171; } .top-designer-list .item .body .left .place { color: #717171; } .top-designer-list .item .body .left .followers { color: #717171; } .top-designer-info .top { background: #f8eced; } .my-competition-item .place, .my-home-item .place { color: #717171; } .my-competition-item .date, .my-home-item .date { color: #717171; } .my-home-item.no-active { background: #f7f7f7; } .my-home-item .switches .item a { color: #bb344c; } #team-participant-view-modal .place { color: #717171; } .my-reviews-item { background: #f7f7f7; } .my-reviews-item .date { color: #717171; } .project-image .item { background: #f7f7f7; } .project-image.editable .item .down .btn-cancel { color: #bb344c; } .project-image.editable .item .top > div:last-child .btn-save { background: #bb344c; } .project-image.editable .item .descr > div > div { color: #717171; } .earnings-section .table-wrap .table tr th { background: #f8eced; } .earnings-section .table-wrap .table tr td { background: #f7f7f7; } .help-launch-competition.bg-light-red { background: #f8eced; } .help-launch-competition p { color: #717171; } .help-launch-competition p a { color: #bb344c; } .help-launch-competition .read-more span { color: #bb344c; } .launch-competition .dropdown-group { background: #f7f7f7; } .launch-competition .deadline-msg { background: #f8eced; } .launch-competition .table tr td a, .launch-competition .project-invitations tr td a { color: #bb344c; } .launch-competition #project-constructor .custom-text { background: #f8eced; } .launch-competition #project-constructor #project-constructor-menu > li:hover > a, .launch-competition #project-constructor #project-constructor-menu > li:hover > label { color: #bb344c !important; } .launch-competition #project-constructor #project-constructor-menu > li:hover .menu-header { color: #bb344c !important; } .launch-competition .help-section { background: #f7f7f7; } .award-price-radio .title sup { color: #bb344c; } .award-price-radio .input input { background: #f7f7f7; } .award-price-radio.selected { border: 1px solid #bb344c; } .award-price-radio.selected .price { color: #bb344c; } .award-price-radio.selected .radio { border-color: #bb344c; } .award-price-radio.selected .radio:after { background: #bb344c; } .running-competitions-head { background: #f7f7f7; } @media (max-width: 767px) { .running-competitions-head { background: #f7f7f7; } } .help-section.bg-light-red { background: #f8eced; } .help-section.bg-light-gray { background: #f7f7f7; } .help-section p { color: #717171; } .help-section p a { color: #bb344c; } .help-section .read-more span { color: #bb344c; } #defineRankableSubmissions .row > div input:checked + .item { box-shadow: 0 0 0 2px #bb344c; } .friendsRankingTable tr th, .rankingTable tr th, .friendsCommentsTable tr th { color: #717171; } .friendsRankingTable tr td, .rankingTable tr td, .friendsCommentsTable tr td { background: #f7f7f7; } .friendsRankingTable .ui-state-default, .rankingTable .ui-state-default, .friendsCommentsTable .ui-state-default { background: #f7f7f7; } .friendsRankingListItem .item .info table tr td { color: #717171; } .friendsRankingListItem .item .stat div i { color: #717171; } .rankingListMobile .item table tr td { color: #717171; } .products-tag-list .box > div label { color: #717171; } .page-testimonials .head { background: #f7f7f7; } .page-testimonials .head .info { color: #717171; } .page-testimonials .head .social a:hover { color: #a82b42; } .page-testimonials .btn-go-project { color: #bb344c; } .page-testimonials .btn-go-project:hover { background: #bb344c; } .page-contacts .info { background: #f8eced; } .page-contacts .info .text p a { color: #bb344c; } .page-contacts .info .text p .phone { color: #bb344c; } .section-head h2 a:hover { color: #bb344c; } .hiw .color-bg { background-color: #f8eced; } .hiw .num { color: #bb344c; } .hiw p { color: #717171; } .hiw .item a { color: #bb344c; } @media (max-width: 769px) { .page-faq .item p { color: #717171; } } .page-text p a, .page-text ul li a, .page-text ol li a { color: #bb344c; } .page-text .item a { color: #bb344c; } .page-text .copy { color: #717171; } .page-text .rubrics-box { background: #f7f7f7; } .page-text .rubrics-box .nav li:before { background: #bb344c; } .page-text .rubrics-box .nav li .nav-link.active:after { background: #bb344c; } .map-bottom p { color: #717171; } .page-aboutus .statistic { background: #f7f7f7; } .page-aboutus .statistic p a { color: #bb344c; } .page-aboutus .team-item .role, .page-aboutus .team-item .text { color: #717171; } .page-aboutus .team-item .show-more { color: #bb344c; } .page-aboutus .team-advisors-item { background: #f8eced; } .page-aboutus .team-advisors-item .descr p { color: #717171; } .page-error .error-msg { color: #bb344c; } .page-error .text-2 { color: #717171; } .analytics-page .g-map #mapdiv-legend > div { color: #717171; } .analytics-page #chart-participants-by-sex-project + .legend .item, .analytics-page #chart-participants-by-sex + .legend .item { color: #717171; } .analytics-page .top-countries .table tr th { color: #717171; } .analytics-page .top-list .table tr:first-child td .rank { background: #bb344c; } .analytics-page .top-list .table tr.head + tr td .rank { background: #bb344c; } .analytics-page .top-list .table tr th { background: #f7f7f7; color: #717171; } .analytics-page .top-list .table tr td { color: #717171; background: #f7f7f7; } .analytics-page .top-list .table tr td .name { color: #717171; } .analytics-page .top-list .table tr td a { color: #bb344c; } .analytics-page .legend-mobile span { color: #717171; } .analytics-page .table-header { background-color: #f8eced; } .estimate-rubric .item:hover { box-shadow: 0 0 0 1px #bb344c; } .estimate-progress .item.active span { background: #bb344c; border-color: #bb344c; } .estimate-progress.complete { background: #bb344c; border-top: 36px solid #bb344c; } .estimate-progress.complete .item.check span { background: #bb344c; border-color: #bb344c; box-shadow: 0 0 0 5px #bb344c; } .estimate-head { background: #f7f7f7; } .estimate-head .descr .img + div p { color: #717171; } .estimate-head .we-have-save-help { background: #f8eced; } .estimate-head .we-have-save-help:before { background: #f8eced; } .estimate-head .we-have-save-help i { color: #bb344c; } .estimate-head .we-have-save-help p { color: #717171; } .estimate-head .we-have-save-help p a { color: #bb344c; } .estimate-categories .item .num { color: #bb344c; } .estimate-categories .item.active .img:before { background: #f8eced; } .estimate-categories .item.active .name { color: #bb344c; } @media (max-width: 992px) { .estimate-categories .item { background: #f8eced; } } .estimate-scope-project .nav .nav-item .nav-link { border: 2px solid #f8eced; background: #f8eced; } .estimate-scope-project .nav .nav-item .nav-link.active { border: 2px solid #bb344c; color: #bb344c; } .estimate-scope-project .nav .nav-item .nav-link.active svg path { fill: #bb344c; stroke: #bb344c; } .estimate-scope-project .nav .nav-item .nav-link.active rect { stroke: #bb344c; } .estimate-scope-project .tab-content .room-settings .item.active { background: #bb344c; border: 1px solid #bb344c; } .estimate-scope-project .tab-content .room-size .item { border: 1px solid #f7f7f7; } .estimate-scope-project .tab-content .room-size .item > div { background: linear-gradient(0deg, #f7f7f7, #f7f7f7); } .estimate-scope-project .tab-content .room-size .item .name { color: #bb344c; text-shadow: 1px 1px 0 #bb344c; } .estimate-scope-project .tab-content .room-size .item .name.small { text-shadow: 0px 0px 1px #bb344c; } .estimate-scope-project .tab-content .room-size .item.active > div { background: linear-gradient(0deg, #f8eced, #f8eced); } @media (max-width: 992px) { .estimate-scope-project .tab-content .room-size .item .name { color: #bb344c; } } .estimate-speed-type .item { border: 1px solid #f7f7f7; } .estimate-speed-type .item > div { background: linear-gradient(0deg, #f7f7f7, #f7f7f7); } .estimate-speed-type .item .name { color: #bb344c; text-shadow: 1px 1px 0 #bb344c; } .estimate-speed-type .item.active > div { background: linear-gradient(0deg, #f8eced, #f8eced); } .custom-tooltip .circle { background: #bb344c; } .custom-tooltip ul li:hover { color: #bb344c; } .custom-tooltip ul li:hover a, .custom-tooltip ul li:hover span { color: #bb344c; } .custom-tooltip ul li:hover .circle { background-color: #bb344c; } .testimonial-list .item .descr .location { color: #717171; } .testimonials-nav a span + span { color: #bb344c; } .testimonials-nav a:hover { background: #bb344c; } .tag-competitions-box .tag-active { border: 1px solid #bb344c; } .arcfolioland-nav .pagination li a { color: #717171; } .arcfolioland-nav .pagination li a:hover { color: #bb344c; } .arcfolioland-nav .pagination li.selected a { background-color: #f7f7f7; } .pagination-rem li a { color: #717171; } .pagination-rem li a:hover { color: #bb344c; } .pagination-rem li.selected a { background-color: #f7f7f7; } .list-items-tabs.panel { background: #f7f7f7; } .list-items-tabs.panel ul li .tab { color: #717171; } .img-action > span:hover { color: #bb344c; } .breadcrumbs span, .breadcrumbs a { color: #717171; } .breadcrumbs a:hover { color: #bb344c; } .table.links a:hover { color: #bb344c; } .dropdown.selectable .dropdown-toggle { background: #f8eced; } .dropdown.selectable .dropdown-toggle.show { background: #f8eced; } .dropdown.selectable .dropdown-menu { border: 1px solid #f7f7f7; } .dropdown.selectable .dropdown-menu .dropdown-item a:hover { color: #bb344c; } .dropdown.selectable .dropdown-menu .dropdown-item:hover { color: #bb344c; } .competitions-filter .tabs a { color: #717171; } .competitions-filter .filter .sortby { background: #f8eced; } .live-contests .item .img-wrap { border: 1px solid #f7f7f7; } .custom-tabs ul li .item { color: #717171; } .social-auth-icon .unlink { color: #bb344c; } .profile-img-block .unlink { color: #bb344c; } #vote-project-popup .vote .step-text-number, .vote-project-popup .vote .step-text-number, .vote-project-popup-mobile .vote .step-text-number { color: #bb344c; } #vote-project-popup .vote .step-text-number span, .vote-project-popup .vote .step-text-number span, .vote-project-popup-mobile .vote .step-text-number span { color: #bb344c; } #vote-project-popup .vote .step span, .vote-project-popup .vote .step span, .vote-project-popup-mobile .vote .step span { background: #f7f7f7; color: #717171; } #vote-project-popup .vote .step span:hover, .vote-project-popup .vote .step span:hover, .vote-project-popup-mobile .vote .step span:hover { border-color: #bb344c; color: #bb344c; } #project-change-deadline .ui-datepicker { border: 1px solid #f7f7f7; } #project-change-deadline .ui-datepicker th { color: #717171; } #project-change-deadline .ui-datepicker .ui-state-default.ui-state-active:before, #project-change-deadline .ui-datepicker .ui-widget-content .ui-state-default.ui-state-active:before, #project-change-deadline .ui-datepicker .ui-widget-header .ui-state-default.ui-state-active:before { background: #bb344c; } .topImageSwiper .swiper-slide { background-color: #f8eced; } .family-ranking .see-ranking a { color: #bb344c; } .main-search-module .custom-text { background: #f8eced; } .main-search-module .menu > div.base-menu:hover label, .main-search-module .menu > div.base-menu.active label, .main-search-module .menu > div.base-menu:hover span, .main-search-module .menu > div.base-menu.active span { color: #bb344c !important; } .main-search-module .menu > div.base-menu.active:after { border-bottom: 6px solid #bb344c !important; } .main-search-module-popup .head span sup { color: #bb344c; } .main-search-module-popup .body ul li:hover, .main-search-module-popup .body ul li.active { color: #bb344c; } .main-search-module-popup .body ul li:hover.caret:after, .main-search-module-popup .body ul li.active.caret:after { border-left: 6px solid #bb344c; } .main-search-module-popup .body ul li.selected { color: #bb344c; } .lg-mod .gallery-aside .img-info .author, .lg-mod .gallery-aside .img-info .viewer-pager { color: #717171; } .lg-mod .gallery-aside .img-info .author a, .lg-mod .gallery-aside .img-info .viewer-pager a { color: #717171; } .lg-mod .gallery-aside .download-file-info div { color: #717171; } /* ---- end of generated colours ---- */ /* ---- type: Neue Haas Grotesk at the homepage's sizes (since 6 Nov 2026; Inter 5 Nov, Nunito Sans before; * --hr-font in home-redesign.css, Inter if the Adobe kit is gone) ---- * styles.css sets Manrope on every element (body *, so icon fonts on classes still win, as they do here) and grows * everything by a quarter above 1441px (html 20px). */ html { font-size: 16px; } body { color: #222; } body * { font-family: var(--hr-font, Inter, 'Segoe UI', Arial, sans-serif); } h1, h2 { font-family: var(--hr-font-head, Inter, 'Segoe UI', Arial, sans-serif) !important; } h1 { font-size: 40px; line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; color: #222; } h2 { font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -0.008em; color: #222; } h3 { font-size: 23px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: #222; } h4 { font-size: 19px; line-height: 1.35; font-weight: 700; color: #222; } h5 { font-size: 17px; line-height: 1.4; font-weight: 700; color: #222; } h6 { font-size: 15px; line-height: 1.45; font-weight: 700; color: #222; } @media (max-width: 767px) { h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; } } ul, ol, p, .inline-edit { font-size: 15px; } p { line-height: 1.6; } /* ---- page width: the homepage's gutter ---- */ @media (min-width: 993px) { .wrap { padding-left: 32px; padding-right: 32px; max-width: 1600px; } } /* ---- breadcrumbs: a quiet line above the page ---- */ .breadcrumbs { padding-top: 18px; padding-bottom: 14px; } .breadcrumbs span, .breadcrumbs a { font-size: 13px; line-height: 20px; } /* ---- buttons: the homepage's pills ---- */ .btn { border-radius: 999px; font-size: 15px; line-height: 22px; font-weight: 700; padding: 11px 22px; } .btn-lg { height: auto; font-size: 16px; line-height: 22px; padding: 14px 26px; } .btn-sm { font-size: 13px; line-height: 18px; padding: 7px 14px; } @media (max-width: 767px) { .btn-lg { height: auto; font-size: 15px; padding: 12px 22px; } } .btn-primary, .btn-primary:active, .btn-primary:focus { color: #fff !important; } .btn-secondary, .btn-secondary:active, .btn-secondary:focus { background: #f3f3f3; border-color: #f3f3f3; } .btn-secondary:hover { background: #e8e8e8; border-color: #e8e8e8; } .btn-light { border-color: #ddd; } /* ---- form fields ---- */ .form-control, .form-select { border-radius: 12px; border-color: #ddd; font-size: 15px; } .form-control:focus, .form-select:focus { border-color: #222; box-shadow: none; } .form-check-input:checked { background-color: #bb344c; border-color: #bb344c; } /* ---- Past competitions (views/project/indexByContest_redesign.php): the homepage's cards in a grid ---- */ .sr-page { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .sr-page p { font-size: inherit; } .sr-page .hr-section { padding-top: 6px; } .sr-page h1 { font-size: 34px; margin: 0 0 4px; } .sr-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--hr-line); margin-bottom: 24px; } .sr-tabs a { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--hr-muted); text-decoration: none; } .sr-tabs a:hover { color: var(--hr-text); } .sr-tabs a[aria-current] { color: var(--hr-text); border-bottom-color: var(--hr-text); } .sr-sort { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--hr-muted); } .sr-sort select { appearance: none; -webkit-appearance: none; border: 1px solid #ddd; border-radius: 999px; padding: 8px 34px 8px 15px; font-size: 13px; font-weight: 700; color: var(--hr-text); cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 12px; } .sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 26px; } .sr-chips .hr-chip { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 8px 15px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--hr-text); background: #fff; text-decoration: none; cursor: pointer; } .sr-chips .hr-chip:hover { border-color: #999; } .sr-chips .hr-chip.is-on { background: var(--hr-text); border-color: var(--hr-text); color: #fff; } .sr-chips .hr-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .sr-chips .hr-chip:focus-within { outline: 2px solid var(--hr-text); outline-offset: 2px; } .sr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; } .sr-grid .hr-project h3 { font-size: 15px; } .sr-grid .hr-project p { font-size: 13px; } .sr-grid .hr-project a:hover h3 { text-decoration: underline; } .sr-noimage { display: block; aspect-ratio: 1.1; border-radius: 14px; background: var(--hr-soft); } .sr-more { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 4px; } .sr-morebutton { border: 1px solid var(--hr-text); border-radius: 999px; padding: 11px 28px; background: #fff; font-size: 14px; font-weight: 700; color: var(--hr-text); } .sr-morebutton:hover { background: var(--hr-text); color: #fff; } .sr-morebutton:disabled { opacity: .5; } .sr-nextpage { font-size: 12px; color: var(--hr-muted); } .sr-empty { padding: 40px 0; color: var(--hr-muted); } @media (max-width: 1199px) { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .sr-page h1 { font-size: 28px; } } @media (max-width: 480px) { .sr-grid { grid-template-columns: minmax(0, 1fr); } .sr-tabs { flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; } .sr-tabs a { flex: none; font-size: 13px; } } /* ---- Running competitions (views/project/indexByRunningCompetition_redesign.php): the client's picture with the * time left on it, the brief's facts below ---- */ @media (min-width: 1200px) { .sr-grid--live { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; } } .sr-live__image { position: relative; display: block; } .sr-live__time { position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px #0000001f; font-size: 12px; font-weight: 800; line-height: 18px; color: var(--hr-text); font-variant-numeric: tabular-nums; } .sr-live__time.is-soon { background: var(--hr-accent); color: #fff; } /* the live countdown (js_new/countdown.js): a dark grey pill with steady digits, red in the last day */ .sr-live__time--clock { padding: 5px 12px; background: rgba(34, 34, 34, .82); box-shadow: none; color: #fff; letter-spacing: .02em; backdrop-filter: blur(4px); } .sr-live__time--clock.is-soon { background: var(--hr-accent); } /* the same countdown as four boxes, days, hours, minutes, seconds, each a number over its unit (6 Nov 2026) */ .sr-live__time--clock.is-boxes { display: flex; gap: 4px; padding: 0; background: none; backdrop-filter: none; letter-spacing: 0; } .sr-live__time--clock.is-boxes .cd-box { display: grid; justify-items: center; min-width: 40px; padding: 5px 4px 4px; border-radius: 9px; background: rgba(34, 34, 34, .82); backdrop-filter: blur(4px); } .sr-live__time--clock.is-boxes .cd-box b { font-size: 15px; line-height: 1.05; font-weight: 800; } .sr-live__time--clock.is-boxes .cd-box small { font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; } .sr-live__time--clock.is-boxes.is-soon { background: none; } .sr-live__time--clock.is-boxes.is-soon .cd-box { background: var(--hr-accent); } .sr-live .sr-live__facts { display: flex; flex-wrap: wrap; gap: 2px 12px; } .sr-live__facts strong { color: #333; } .sr-live__action { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--hr-text); } .sr-live a:hover .sr-live__action { text-decoration: underline; } /* ---- Top 50 designers (views/ranking/index_redesign.php, widgets/views/ratingInfo_redesign.php): one row per * designer, the rank first ---- */ .sr-ranking { display: grid; border-top: 1px solid var(--hr-line); } .sr-designer { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 150px; align-items: center; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--hr-line); } .sr-designer__rank { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; text-align: center; } .sr-designer__rank.is-up::after, .sr-designer__rank.is-down::after { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0; } .sr-designer__rank.is-up::after { content: "▲"; color: #2f7d4f; } .sr-designer__rank.is-down::after { content: "▼"; color: var(--hr-accent); } .sr-designer__who { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .sr-designer__photo { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--hr-soft); } .sr-designer__name { min-width: 0; } .sr-designer__name > a { font-size: 17px; font-weight: 800; color: var(--hr-text); text-decoration: none; } .sr-designer__name > a:hover { text-decoration: underline; } .sr-designer__name p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 3px 0 0; font-size: 13px; color: var(--hr-muted); } .sr-designer__name p img { border-radius: 2px; } .sr-designer__tags .hr-chip { padding: 3px 10px; font-size: 12px; color: var(--hr-text); } .sr-follow { display: inline-block; margin-top: 8px; padding: 5px 14px; border: 1px solid var(--hr-text); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hr-text); text-decoration: none; } .sr-follow:hover { background: var(--hr-text); color: #fff; } .sr-follow.unfollow { border-color: #ccc; color: var(--hr-muted); } .sr-designer__stats { display: flex; gap: 26px; margin: 0; } .sr-designer__stats dt { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--hr-muted); } .sr-designer__stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .sr-designer__prizes dd { display: flex; gap: 6px; } .sr-designer__prizes span { min-width: 30px; padding: 2px 7px; border-radius: 999px; font-size: 13px; text-align: center; color: #222; } .sr-designer__prizes .is-first { background: #e9c85c; } .sr-designer__prizes .is-second { background: #d9d9de; } .sr-designer__prizes .is-third { background: #eaa25b; } .sr-designer__work { display: block; } .sr-designer__work img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--hr-soft); } .sr-ranking .sr-more { padding-top: 22px; } @media (max-width: 991px) { .sr-designer { grid-template-columns: 40px minmax(0, 1fr) 110px; gap: 14px 16px; } .sr-designer__stats { grid-column: 2 / 4; grid-row: 2; gap: 20px; } .sr-designer__work { grid-column: 3; grid-row: 1; } .sr-designer__rank { font-size: 21px; } } @media (max-width: 520px) { .sr-designer { grid-template-columns: 34px minmax(0, 1fr); } .sr-designer__work { display: none; } .sr-designer__stats { grid-column: 1 / 3; flex-wrap: wrap; } } /* ---- A finished competition (views/project/_publicViewArcfolio_redesign.php) ---- * The top and the tabs are new; the tab contents are the previous page's (_publicViewArcfolioTabs), restyled here. */ .sc-page { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } /* styles.css draws every .hr inside .arcfolioland as a 1px divider line */ .arcfolioland .hr.sc-page { height: auto; margin: 0; background: none; } .sc-page p { font-size: inherit; } .sc-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 10px; padding-bottom: 26px; } .sc-hero__media { position: relative; } .sc-hero__image { display: block; } .sc-hero__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--hr-soft); } .sc-place { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #222; background: #fff; box-shadow: 0 2px 10px #0000001f; } .sc-place--first { background: #e9c85c; } .sc-place--second { background: #d9d9de; } .sc-place--third { background: #eaa25b; } .sc-place--voters { left: auto; right: 72px; background: #3d55f9; color: #fff; } .sc-hero__media .img-action { top: 14px; right: 14px; } .sc-hero__media .img-action > span { width: 40px; height: 40px; line-height: 41px; font-size: 15px; background: #00000059; } .sc-hero__info .hr-eyebrow { text-transform: uppercase; } .sc-hero__info h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; } .sc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 18px; font-size: 13px; color: var(--hr-muted); } .sc-meta span + span::before { content: "·"; margin-right: 16px; } /* a place opens its designers (Designers for ): a quiet link, the competition's own client gets a line */ .sc-meta a, .sp-head__place a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .sc-meta a:hover, .sp-head__place a:hover { color: var(--hr-text); } .sc-local { margin: -8px 0 16px; font-size: 14px; } .sc-local a { color: var(--hr-accent); font-weight: 700; } .sc-award { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; margin-bottom: 16px; } .sc-award .hr-muted { display: block; font-size: 12px; } .sc-award strong { font-size: 28px; line-height: 1.1; font-weight: 800; } .sc-award__compare, .sc-award__compare * { font-size: 12px !important; line-height: 1.5 !important; color: var(--hr-muted) !important; text-align: right; } .sc-winner { margin: 0 0 14px; font-size: 14px; } .sc-winner a { font-weight: 700; color: var(--hr-text); } .sc-ratings, .sc-ratings.project-head { margin-bottom: 14px; padding: 0; background: none; } .sc-ratings .box-notesite ul { margin: 0; padding: 0; } .sc-ratings .upper { font-size: 11px !important; color: var(--hr-muted) !important; } .sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 6px 0 18px; } .sc-client:empty { display: none; } .sc-tabs { display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); border-bottom: 1px solid var(--hr-line); background: none; } .sc-tabs a.tab { flex: none; padding: 12px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--hr-muted); text-decoration: none; } .sc-tabs a.tab:hover { color: var(--hr-text); } .sc-tabs a.tab.active { color: var(--hr-text); border-bottom-color: var(--hr-text); } .sc-tabs a.tab span { margin-left: 4px; font-weight: 600; color: var(--hr-muted); } .sc-content { padding-top: 26px; } /* the design entries (also a designer's projects, .sp-profile): the homepage's cards (picture, then text below it) * instead of text over the picture; also a client's ideabook and votes on My Home (.cm-home) and the entries to rank * (.view-project-submissions) */ :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item { padding-top: 0; margin-bottom: 30px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .img { position: relative; inset: auto; aspect-ratio: 1.1; border-radius: 14px; background: var(--hr-soft); } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .img:before { height: 32%; opacity: .35; border-radius: 14px 14px 0 0; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .img img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; min-width: 0; object-fit: cover; transform: none; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item:hover .img img { transform: scale(1.04); } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .img-action > span { width: 36px; height: 36px; line-height: 37px; font-size: 14px; margin-bottom: 6px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item > .img-action { top: 98px !important; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank { top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px; color: #222; z-index: 3; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank b { font-size: 13px; line-height: 18px; margin-right: 2px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank.first { background: #e9c85c; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank.second { background: #d9d9de; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank.third { background: #eaa25b; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank.honorable { background: #fff; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr { position: static; padding: 10px 0 0; background: none; border-radius: 0; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .row { --bs-gutter-x: 8px; margin-bottom: 2px !important; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .user a { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--hr-text); text-decoration: none; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .user a:hover { text-decoration: underline; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .user a i { width: 22px; height: 22px; margin-right: 7px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .place { font-size: 12px; line-height: 20px; color: var(--hr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .rate { padding: 0; border: 0; background: none; font-size: 12px; line-height: 20px; color: var(--hr-muted); } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .rate span { font-size: 14px; line-height: 20px; color: var(--hr-text); margin-right: 3px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .rate span::before { content: "★ "; font-size: 12px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .btn-vote { min-width: 0; height: auto; padding: 0; border: 0; background: none; font-size: 12px; line-height: 20px; font-weight: 700; color: var(--hr-text) !important; text-decoration: underline !important; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .descr .voters-choice { top: 10px; right: auto; left: 10px; padding: 4px 11px; font-size: 12px; line-height: 18px; z-index: 3; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .project-rank ~ .descr .voters-choice { left: auto; right: 54px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions) .list-items .item .certificate-btn { top: 40px; left: 10px; padding: 4px 11px; font-size: 12px; line-height: 18px; } @media (min-width: 1200px) { .sc-content .infinite-projects .row > .col-lg-4, :is(.sp-profile, .cm-home, .view-project-submissions, .vt-page) .list-items .row > .col-lg-4 { flex: 0 0 25%; max-width: 25%; } } @media (max-width: 991px) { .sc-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; } .sc-hero__info h1 { font-size: 28px; } } /* ---- A designer's public profile (views/user/view_new.php, widgets/views/UserDetails_redesign.php) ---- */ .arcfolioland .hr.sp-head { height: auto; margin: 0; background: none; } .sp-head { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .sp-head p { font-size: inherit; } .sp-head__inner { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; grid-template-areas: "photo who stats" "photo cats cats" "photo share share"; gap: 14px 30px; align-items: start; padding-top: 10px; padding-bottom: 24px; } .sp-head__photo { grid-area: photo; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; background: var(--hr-soft); } .sp-head__who { grid-area: who; min-width: 0; } .sp-head__who h1 { font-size: 32px; line-height: 1.2; margin: 6px 0 4px; overflow-wrap: anywhere; } .sp-head__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .sp-rank, .sp-badge { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 18px; text-decoration: none; } .sp-rank { background: var(--hr-text); color: #fff !important; } .sp-badge { background: #e9c85c; color: #222; } .sp-head__place { margin: 0; color: var(--hr-muted); font-size: 14px; } /* the designer's own My Home: what keeps them out of Designers for (UserDetails_redesign.php) */ .sp-nudge { max-width: 560px; margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: #fdf3e7; color: #6b4410; font-size: 14px; line-height: 1.45; } .sp-nudge a { color: var(--hr-accent); font-weight: 700; white-space: nowrap; } .sp-head__follow { margin: 4px 0 0; } .sp-head__stats { grid-area: stats; } .sp-head__categories { grid-area: cats; margin: 0; } .sp-head__categories .hr-chip span { margin-left: 3px; color: var(--hr-muted); } .sp-head__categories .hr-chip.is-on span { color: #fff; } .sp-head__categories .hr-link { align-self: center; margin-left: 6px; } .sp-head__share { grid-area: share; } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel { max-width: 1600px; margin: 0 auto 26px; padding: 0 var(--hr-gutter); background: none; } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel .wrap { padding: 0; max-width: none; } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel ul { display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--hr-line); white-space: nowrap; } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel ul li { margin: 0; flex: none; } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel ul li .tab { padding: 12px 0; margin-bottom: -1px; font-size: 14px; font-weight: 700; color: var(--hr-muted); } :is(.sp-profile, .rc-page, .cm-home, .vt-page, .de-page, .launch-competition) .list-items-tabs.panel ul li .tab.active { color: var(--hr-text); border-color: var(--hr-text); } .sp-profile .list-items .item .descr .title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--hr-text); white-space: nowrap; } @media (max-width: 991px) { .sp-head__inner { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "photo who" "stats stats" "cats cats" "share share"; gap: 14px 18px; } .sp-head__photo { width: 88px; height: 88px; } .sp-head__who h1 { font-size: 26px; } } /* a project's title takes the whole line, its place goes under it */ .sp-profile .list-items .item .descr > .row:first-of-type > div { width: 100%; text-align: left !important; } .sp-profile .list-items .item .descr .title { overflow: hidden; text-overflow: ellipsis; } /* ---- Testimonials (views/testimonials/index_redesign.php, view_redesign.php): the homepage's testimonial cards ---- */ /* styles.css gives every footer element the page footer's grey and padding */ .sr-page blockquote footer { padding: 0; background: none; } .sr-grid--quotes { align-items: start; } @media (min-width: 1200px) { .sr-grid--quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } } .sr-quote .hr-quote__image { height: 210px; } .sr-quote p { font-size: 16px; } .sr-quote footer { font-size: 13px; } .st-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 10px; } .st-story__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--hr-soft); } .st-story__text h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; } .st-story__quote { margin: 0 0 20px; padding: 0; } .st-story__quote p { margin: 0 0 14px; font-size: 19px; line-height: 1.55; letter-spacing: -.2px; } .st-story__quote footer { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .st-story__share { display: inline-flex; gap: 10px; } .st-nav { display: flex; justify-content: space-between; gap: 20px; } .st-nav a { display: grid; gap: 2px; max-width: 46%; font-size: 15px; font-weight: 700; color: var(--hr-text); text-decoration: none; } .st-nav a:hover { text-decoration: underline; } .st-nav a span { font-size: 12px; font-weight: 600; color: var(--hr-muted); } .st-nav__next { margin-left: auto; text-align: right; } @media (max-width: 991px) { .st-story { grid-template-columns: minmax(0, 1fr); gap: 22px; } .st-story__text h1 { font-size: 26px; } } /* ---- Help: How it works and the FAQs (views/site/pages/howitworks_redesign.php, _faq_redesign.php) ---- */ .sh-intro { margin-bottom: 26px; } .sh-intro h1 { font-size: 34px; margin: 0 0 4px; } .sh-page h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.4px; margin: 0 0 16px; } .sh-page h3 { font-size: 16px; line-height: 1.4; margin: 0 0 4px; } .sh-lead { font-size: 18px; line-height: 1.6; margin: 0 0 22px; max-width: 62ch; } .sh-page .hr-title .hr-link { white-space: normal; } .sh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .sh-cta h2 { margin-bottom: 4px; } .sh-faq { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; } .sh-faq__nav { position: sticky; top: 90px; display: grid; gap: 2px; } .sh-faq__nav a { padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--hr-muted); text-decoration: none; } .sh-faq__nav a:hover { background: var(--hr-soft); color: var(--hr-text); } .sh-faq__section { margin-bottom: 34px; scroll-margin-top: 90px; } .sh-faq__item { border-bottom: 1px solid var(--hr-line); } .sh-faq__item summary { position: relative; padding: 15px 36px 15px 0; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; } .sh-faq__item summary::-webkit-details-marker { display: none; } .sh-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 400; color: var(--hr-muted); } .sh-faq__item[open] summary::after { content: "–"; } .sh-faq__answer { padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: #444; max-width: 72ch; } .sh-faq__answer p, .sh-faq__answer li { font-size: inherit; } @media (max-width: 991px) { .sh-faq { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sh-faq__nav { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; } .sh-faq__nav a { flex: none; border: 1px solid #ddd; border-radius: 999px; font-size: 13px; } .sh-intro h1 { font-size: 28px; } } /* Follow and Message (SpaceApp) side by side on the Top 50 and the profile */ .sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; } .sr-actions .sr-follow { margin-top: 0; } .sr-message { display: inline-flex; align-items: center; gap: 6px; } .sr-message svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } /* ---- Top 50: one card per designer (widgets/views/ratingInfo_redesign.php), one long row from tablet width up ---- */ .sr-ranking { gap: 14px; border-top: 0; } .sr-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) 220px; gap: 0 22px; padding: 14px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fcfbfa; } .sr-card__rank { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 14px 0; padding-right: 18px; border-right: 1px solid #dcdcdc; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .sr-card__rank.is-up::after, .sr-card__rank.is-down::after { margin-top: 9px; font-size: 14px; letter-spacing: 0; } .sr-card__rank.is-up::after { content: "\25B2"; color: #2f6b4f; } .sr-card__rank.is-down::after { content: "\25BC"; color: var(--hr-accent); } .sr-card__main { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 0; } .sr-card__top { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hr-line); } .sr-card__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--hr-soft); } .sr-card__who { min-width: 0; } .sr-card__who h2 { margin: 0 0 2px; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.4px; overflow-wrap: anywhere; } .sr-card__who h2 a { color: var(--hr-text); text-decoration: none; } .sr-card__who h2 a:hover { text-decoration: underline; } .sr-card__place { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 14px; color: var(--hr-muted); } .sr-card__place img { flex: none; width: 18px; height: 12px; border-radius: 2px; } .sr-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; } .sr-card__tags .hr-chip { padding: 3px 12px; font-size: 13px; font-weight: 600; color: var(--hr-text); background: #fff; } .sr-card__followers { padding-left: 12px; border-left: 1px solid #ccc; font-size: 13px; color: var(--hr-muted); } .sr-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .sr-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 20px; border: 1.5px solid var(--hr-text); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--hr-text); text-decoration: none; white-space: nowrap; } .sr-pill:hover { background: var(--hr-text); color: #fff; } .sr-pill.unfollow { border-color: #ccc; color: var(--hr-muted); } .sr-pill--message { border-color: var(--hr-accent); background: var(--hr-accent); color: #fff !important; } .sr-pill--message:hover { border-color: var(--hr-accent-dark); background: var(--hr-accent-dark); } .sr-pill--message svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .sr-card__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 12px; } .sr-card__numbers { display: flex; gap: 28px; margin: 0; padding-right: 24px; border-right: 1px solid #dcdcdc; } .sr-card__numbers dt, .sr-card__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--hr-muted); } .sr-card__numbers dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; } .sr-card__awards { display: grid; gap: 4px; } .sr-awards { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; } .sr-awards span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.2; color: #222; font-variant-numeric: tabular-nums; } .sr-awards svg { width: 17px; height: 17px; stroke: none; } .sr-awards .is-first { background: #f7e7ad; } .sr-awards .is-first svg { fill: #dfb646; } .sr-awards .is-second { background: #e7e7ea; } .sr-awards .is-second svg { fill: #96969e; } .sr-awards .is-third { background: #f7dcc2; } .sr-awards .is-third svg { fill: #d98a48; } .sr-card__profile { margin-left: auto; font-size: 14px; font-weight: 700; color: #2f6b4f; text-decoration: none; white-space: nowrap; } .sr-card__profile:hover { text-decoration: underline; } .sr-card__work { display: block; } .sr-card__work img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 12px; background: var(--hr-soft); } @media (max-width: 1199px) { .sr-card { grid-template-columns: 52px minmax(0, 1fr) 160px; gap: 0 16px; padding: 12px; } .sr-card__rank { padding-right: 12px; font-size: 24px; } .sr-card__top { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px 14px; } .sr-card__photo { width: 56px; height: 56px; } .sr-card__who h2 { font-size: 18px; } .sr-card__place { font-size: 13px; } .sr-pill { padding: 6px 14px; font-size: 13px; } .sr-card__bottom { gap: 8px 18px; } .sr-card__numbers { gap: 20px; padding-right: 18px; } .sr-card__numbers dd { font-size: 18px; } .sr-awards span { padding: 2px 9px 2px 7px; font-size: 13px; } .sr-awards svg { width: 15px; height: 15px; } .sr-card__work img { min-height: 130px; } } @media (max-width: 767px) { .sr-card { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 14px; } .sr-card__work { display: none; } .sr-card__rank { margin: 6px 0; padding-right: 10px; font-size: 22px; } .sr-card__rank.is-up::after, .sr-card__rank.is-down::after { margin-top: 8px; font-size: 12px; } .sr-card__top { grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 12px; } .sr-card__photo { width: 52px; height: 52px; } .sr-card__actions { grid-column: 1 / -1; } .sr-card__followers { padding-left: 0; border-left: 0; } .sr-card__numbers { padding-right: 0; border-right: 0; } .sr-card__profile { margin-left: 0; } } /* the profile's awards take the same pills */ .sp-head__stats .sr-awards span { padding: 3px 11px 3px 9px; font-size: 14px; } .sp-head__stats .sr-awards svg { width: 17px; height: 17px; } /* ---- SpaceApp's AI judge on a design's page (views/designerSubmission/_ai_judge_redesign.php, AiJudge) ---- */ .ai-judge { display: grid; gap: 12px; margin: 18px 0; padding: 18px 20px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fcfbfa; } .ai-judge__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; } .ai-judge__head .hr-eyebrow { margin: 0 0 2px; } .ai-judge__overall { margin: 0; line-height: 1; } .ai-judge__overall strong { font-size: 34px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .ai-judge__overall span { margin-left: 3px; color: var(--hr-muted); font-size: 15px; font-weight: 600; } .ai-judge__place { margin: 0; padding: 5px 12px; border-radius: 999px; background: #222; color: #fff; font-size: 13px; font-weight: 700; } .ai-judge__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 22px; margin: 0; } .ai-judge__scores div { display: grid; gap: 3px; } .ai-judge__scores dt { font-size: 12.5px; font-weight: 600; color: var(--hr-muted); } .ai-judge__scores dd { display: flex; align-items: center; gap: 8px; margin: 0; } .ai-judge__scores dd b { width: 18px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; } .ai-judge__bar { flex: 1; height: 6px; border-radius: 999px; background: #ece9e3; overflow: hidden; } .ai-judge__bar i { display: block; height: 100%; border-radius: 999px; background: var(--hr-accent); } .ai-judge__summary { margin: 0; font-size: 15px; } .ai-judge__reason { margin: 0; font-size: 14px; color: var(--hr-muted); } .ai-judge__more { padding: 10px 14px; border-radius: 12px; background: #f6f4f1; font-size: 13.5px; } .ai-judge__more ul { margin: 4px 0 0; padding-left: 18px; } .ai-judge__more--flags { background: #fdf3e7; color: #6b4410; } .ai-judge__note { margin: 0; font-size: 12px; color: var(--hr-muted); } /* ---- Designers for (views/ranking/country_redesign.php, DesignersByCountry): groups, badges, notes ---- */ .sr-headcontrols { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; } .sr-card--norank { grid-template-columns: minmax(0, 1fr) 220px; } .sr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; } .sr-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #eef6f1; color: #1d6b43; } .sr-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .sr-badge--licensed { background: #e9f0fb; color: #1f4f9a; } .sr-badge--projects { background: #f6efe4; color: #87561a; } .sr-badge--ai { background: #f7e8eb; color: #a82b42; } /* the AI judge score (Top 50 sorted by it) */ .sr-badge--top { background: #222; color: #fff; } .sr-badge--top::before { content: "°5"; width: auto; height: auto; border-radius: 0; background: none; font-size: 11px; } .sr-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 0; } .sr-group--first { margin-top: 0; } .sr-group h2 { margin: 0; font-size: 20px; font-weight: 800; } .sr-group span { color: var(--hr-muted); font-size: 14px; } .sr-group .hr-link { margin-left: auto; font-size: 14px; } .sr-groupmore { margin: 0; text-align: right; font-size: 14px; font-weight: 700; } .sr-countrynote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 0 0 18px; padding: 16px 20px; border: 1px solid #ece7e1; border-radius: 16px; background: #f6f4f1; font-size: 14.5px; line-height: 1.45; } .sr-countrynote p { flex: 1 1 320px; margin: 0; } .sr-countrynote b { display: block; margin-bottom: 2px; font-size: 15.5px; } .sr-countrynote--line { display: block; margin: 0; padding: 14px 18px; border: 0; } .sr-countrynote--line a, .sr-invite a { color: var(--hr-accent); font-weight: 700; } .sr-invite { margin: 0; padding: 12px 16px; border: 1px dashed #d9d2c9; border-radius: 14px; color: var(--hr-muted); font-size: 13.5px; } @media (max-width: 1199px) { .sr-card--norank { grid-template-columns: minmax(0, 1fr) 160px; } } @media (max-width: 767px) { .sr-headcontrols { justify-content: flex-start; } .sr-card--norank { grid-template-columns: minmax(0, 1fr); } .sr-group .hr-link { margin-left: 0; } } /* ---- How it works (views/site/pages/howitworks_redesign.php): one real competition tells the three steps ---- */ .hw-hero { max-width: 760px; padding: 6px 0 4px; } .hw-hero h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.8px; margin: 0 0 12px; text-wrap: balance; } .hw-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .hw-steps { display: grid; gap: 34px; } .hw-steps > .hr-eyebrow { margin: 0 0 -18px; } .hw-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; align-items: center; } .hw-step__n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--hr-text); color: #fff; font-size: 14px; font-weight: 800; } .hw-step__text h2 { margin-bottom: 6px; } .hw-step__text p { margin: 0; max-width: 46ch; } .hw-count { margin-top: 12px !important; font-size: 15px; font-weight: 800; color: var(--hr-text); } .hw-brief { display: grid; gap: 8px; padding: 22px; border: 1px solid #e7e7e7; border-radius: 18px; background: #fafaf9; color: var(--hr-text); text-decoration: none; } .hw-brief:hover { border-color: #c9c9c9; } .hw-brief__category { font-size: 12px; color: var(--hr-muted); } .hw-brief strong { font-size: 18px; line-height: 1.35; } .hw-brief__text { font-size: 14px; line-height: 1.6; color: #444; } .hw-brief__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--hr-muted); } .hw-brief__facts b { color: var(--hr-text); } .hw-entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .hw-entries a { position: relative; display: block; } .hw-entries img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--hr-soft); } .hw-entries--winners { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hw-entries--winners img { aspect-ratio: 4 / 3; } .hw-entries--winners .sr-awards { position: absolute; top: 10px; left: 10px; } .hw-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .hw-reasons > div { padding: 20px; border: 1px solid var(--hr-line); border-radius: 16px; } .hw-reasons__icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: #f3f3f3; font-size: 15px; font-weight: 800; } .hw-reasons p { margin: 0; } .hw-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 34px; align-items: center; color: var(--hr-text); text-decoration: none; } .hw-story img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--hr-soft); } .hw-story blockquote { margin: 0; } .hw-story blockquote p { margin: 0 0 12px; font-size: 21px; line-height: 1.5; letter-spacing: -.3px; } .hw-story footer { padding: 0; background: none; font-size: 14px; color: var(--hr-muted); } @media (max-width: 991px) { .hw-hero h1 { font-size: 30px; } .hw-step, .hw-story { grid-template-columns: minmax(0, 1fr); gap: 16px; } .hw-reasons { grid-template-columns: minmax(0, 1fr); } .hw-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .hw-story blockquote p { font-size: 18px; } } @media (max-width: 520px) { .hw-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hw-entries--winners { grid-template-columns: minmax(0, 1fr); } } /* AI and SpaceApp under a step */ .hw-help { display: flex; align-items: flex-start; gap: 10px; max-width: 46ch; margin: 14px 0 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--hr-soft); font-size: 14px; line-height: 1.5; color: var(--hr-text); text-decoration: none; } a.hw-help:hover { background: #efefef; } .hw-help img { flex: none; width: 22px; height: 22px; border-radius: 6px; } .hw-help__tag { flex: none; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--hr-text); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; } /* ---- A running competition (views/project/runningCompetitionsPagesNew/_header_top_redesign.php): the competition * beside its picture; the tabs as the profile's; the tab contents keep their layout with the shared style ---- */ .running-competitions-head.rc-page { background: none; } .arcfolioland .hr.rc-head { height: auto; margin: 0; background: none; } .rc-head { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .rc-head p { font-size: inherit; } .rc-head__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 10px; padding-bottom: 22px; } .rc-head__inner--text { grid-template-columns: minmax(0, 1fr); } .rc-head__info { min-width: 0; } .rc-head__info .hr-eyebrow { text-transform: uppercase; } .rc-head__info h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; } .rc-head__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--hr-soft); } .rc-award { justify-content: flex-start; gap: 12px 40px; } .rc-award__time strong { font-size: 22px; } .rc-award__time.is-soon strong { color: var(--hr-accent); } /* the live countdown (js_new/countdown.js) in a grey box, so it stands out next to the award */ .rc-award__time--clock { padding: 10px 16px; border-radius: 14px; background: #f0f0f0; } .rc-award__time--clock strong { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; } .rc-award__time--clock.is-soon, .rc-award__time--clock:has(strong.is-soon) { background: #fbe9ec; } .rc-award__time--clock strong.is-soon { color: var(--hr-accent); } .rc-award .sc-award__compare { margin-left: auto; } .rc-actions .hr-primary.disabled, .rc-actions .sr-pill.disabled { opacity: .45; pointer-events: none; } .rc-share { display: inline-flex; gap: 10px; margin-left: auto; } .rc-page .list-items-tabs.panel { margin-bottom: 0; } /* the client's options under the tabs (Description, inspiration, invite) as chips */ .rc-page .bg-light-red { background: none; } .rc-page .custom-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .rc-page .custom-tabs ul li a.item { display: inline-block; padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--hr-text); text-decoration: none; background: #fff; } .rc-page .custom-tabs ul li a.item.active, .rc-page .custom-tabs ul li a.item:hover { background: var(--hr-text); border-color: var(--hr-text); color: #fff; } /* the tab contents: the signed-up designers and deadlines as the redesign's boxes */ .rc-page ~ .wrap .singned-designer-list .box, .rc-page ~ .wrap #DetailDeadlines { padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fafafa; } .rc-page ~ .wrap .text-green { color: var(--hr-text) !important; font-weight: 800; } @media (max-width: 991px) { .rc-head__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; } .rc-head__image { order: -1; } .rc-head__info h1 { font-size: 26px; } .rc-share { margin-left: 0; } } @media (max-width: 600px) { .sc-meta { flex-direction: column; gap: 2px; } .sc-meta span + span::before { content: none; } } /* ---- A designer's My Home (views/user/designer_home_new.php): the profile's header (UserDetailsRedesign, with My bank) * and tabs (.sp-profile), the signed-up competitions as the client's cards ---- */ .dm-actions { display: flex; flex-wrap: wrap; gap: 8px; } .dm-actions a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font-size: 14px; } .dm-home .alternate > h5 { margin-top: 4px; font-size: 20px; font-weight: 800; } .dm-home .my-competition-item { display: flex; gap: 22px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; overflow: hidden; } .dm-home .my-competition-item .img { flex: 0 0 240px; width: 240px; min-height: 170px; border-radius: 14px; background-size: cover; background-position: center; } .dm-home .my-competition-item .descr { flex: 1; min-width: 0; padding: 4px 4px 0 0; } .dm-home .my-competition-item h4, .dm-home .my-competition-item h6 { font-size: 19px; line-height: 1.3; } .dm-home .my-competition-item .descr .btn { border-radius: 999px; font-size: 14px; padding: 9px 20px; } @media (max-width: 767px) { .dm-home .my-competition-item { flex-direction: column; gap: 12px; } .dm-home .my-competition-item .img { width: 100%; flex-basis: auto; min-height: 180px; } } /* ---- A designer's submission (views/designerSubmission/designerEdit_new.php, _edit_top_redesign.php): the * competition and what the client asked for side by side, the tabs as chips, each group of uploads as a card; the * upload, tagging and video scripts unchanged ---- */ .arcfolioland .hr.ds-head { height: auto; margin: 0; background: none; } .ds-head { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .ds-head p { font-size: inherit; } .ds-head__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; padding-top: 10px; padding-bottom: 18px; } .ds-head__info { min-width: 0; } .ds-head__info .hr-eyebrow { text-transform: uppercase; } .ds-head__info h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.2; } .ds-head__info h1 a { color: inherit; text-decoration: none; } .ds-head__info h1 a:hover { text-decoration: underline; } .ds-head__time.is-soon { font-weight: 700; color: var(--hr-accent); } .ds-head__vis { margin-top: 12px; } .ds-head__vis .SubVisToggle { text-align: left !important; } .ds-head__brief { padding: 18px 20px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fafafa; } .ds-head__brief h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; } .ds-head__brief ul { margin: 0; padding-left: 4px; list-style: none; font-size: 14px; line-height: 1.55; } .ds-head__brief .divider-32 { display: none; } .ds-page #superSimpleTabs > .bg-light-gray { background: none; } .ds-page #superSimpleTabs .custom-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; border: 0; } .ds-page #superSimpleTabs .custom-tabs ul li { margin: 0; } .ds-page #superSimpleTabs .custom-tabs a.item { display: inline-block; padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--hr-text); text-decoration: none; } .ds-page #superSimpleTabs .custom-tabs a.item::after { display: none; } .ds-page #superSimpleTabs .custom-tabs a.item.active, .ds-page #superSimpleTabs .custom-tabs a.item:hover { border-color: var(--hr-text); background: var(--hr-text); color: #fff; } /* each group of uploads (images, CAD) as a card */ .ds-page #UploadWidget > .wrap { width: calc(100% - 2 * var(--hr-gutter)); max-width: 1536px; margin: 18px auto; padding: 4px 24px 22px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .ds-page #UploadWidget > hr { display: none; } .ds-page #UploadWidget .divider-32 { height: 18px; } .ds-page #UploadWidget h4 { font-size: 20px; font-weight: 800; } .ds-page #UploadWidget hr { height: 1px; border: 0; background: var(--hr-line); opacity: 1; } .ds-page .body-l-bold { font-size: 16px; font-weight: 800; } .ds-page .text-gray-1 { font-size: 14px; color: var(--hr-muted) !important; } .ds-page .project-image .file-field { border-radius: 14px; } /* tagging and the guidelines below */ .ds-page .tag-designer-notification-block { background: none; } .ds-page .tag-designer-notification-block h4 { font-size: 20px; font-weight: 800; } .ds-page .tag-designer-notification-block p { font-size: 14px; color: var(--hr-muted); } .ds-page #SubUpGuidelines { font-size: 14px; line-height: 1.55; color: var(--hr-muted); } @media (max-width: 991px) { .ds-head__inner { grid-template-columns: minmax(0, 1fr); } .ds-head__info h1 { font-size: 26px; } } @media (max-width: 600px) { .ds-page #UploadWidget > .wrap { padding: 4px 16px 18px; } } /* ---- A client's ranking pages (views/submissionranking: overview_new, invite_new, overallranking_new, thankyou_new): * the competition's top and tabs above (_controls_new, _header.php), the ranking's own tabs as the client's chips, * the entries as the profile's cards (above), the ranking as a quiet table; markup and scripts unchanged ---- */ .rc-page ~ .view-project-nav { max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); background: none; } .rc-page ~ .view-project-nav .wrap { max-width: none; padding: 0; } .rc-page ~ .view-project-nav .custom-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .rc-page ~ .view-project-nav .custom-tabs ul li { margin: 0; } .rc-page ~ .view-project-nav .custom-tabs ul li:empty { display: none; } .rc-page ~ .view-project-nav .custom-tabs a.item { display: inline-block; padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--hr-text); text-decoration: none; } .rc-page ~ .view-project-nav .custom-tabs a.item::after { display: none; } .rc-page ~ .view-project-nav .custom-tabs a.item.active, .rc-page ~ .view-project-nav .custom-tabs a.item:hover { border-color: var(--hr-text); background: var(--hr-text); color: #fff; } .rc-page ~ .view-project-nav .custom-tabs a.tab-inactive { opacity: .45; pointer-events: none; } .view-project-submissions.wrap { margin-top: 0 !important; } .view-project-submissions .list-items .item .alias.new::after { content: "New"; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--hr-accent); font-size: 11px; font-weight: 700; color: #fff; } /* the ranking list: a note, then the table */ .help-section { max-width: 1600px; margin: 18px auto 0; padding: 0 var(--hr-gutter); background: none; } .help-section > div { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fbf1cf; color: #6b5310; } .help-section > div i { margin-top: 3px; color: #b8860b; } .help-section p { display: block; height: auto; max-height: none; margin: 0; overflow: visible; white-space: normal; text-overflow: clip; -webkit-line-clamp: none; font-size: 14px; line-height: 1.5; color: inherit; } .help-section .read-more { display: none; } /* the note in full, so no Read / Less */ .overallRanking-block .divider-60 { height: 26px; } .overallRanking-block .rankingTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } .overallRanking-block .rankingTable th { padding: 10px 8px; border-bottom: 1px solid var(--hr-line); background: none; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--hr-muted); text-transform: none; } .overallRanking-block .rankingTable td { padding: 12px 8px; border-bottom: 1px solid var(--hr-line); background: #fff; vertical-align: middle; } .overallRanking-block .rankingTable tr.ui-state-default { border: 0; background: #fff; } .overallRanking-block .rankingTable tr.ui-state-default:hover td { background: #fafafa; } .overallRanking-block .rankingTable td img { width: 96px !important; height: 72px !important; border-radius: 10px; object-fit: cover; } .overallRanking-block .rankingTable td a.submission-item, .overallRanking-block .rankingTable .averagePoint b { font-weight: 800; color: var(--hr-text); text-decoration: none; } .overallRanking-block .rankingTable .averagePoint b.underlined { border-bottom: 1px dashed #bbb; } .overallRanking-block .rankingTable .award.prize { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; } .overallRanking-block .rankingTable .award.prize.first { background: #f7e6a9; } .overallRanking-block .rankingTable .award.prize.second { background: #e6e6ea; } .overallRanking-block .rankingTable .award.prize.third { background: #f5d3b0; } .overallRanking-block .rankingTable .fa-arrows { color: var(--hr-muted); cursor: grab; } /* the three ranked first, on a soft background, the others below */ .overallRanking-block .rankingTable #topthree td { background: #fcfaf3; } .overallRanking-block .give-bonus-btn, .overallRanking-block .set-rank-btn { border-radius: 999px !important; font-size: 13px !important; font-weight: 700; } .overallRanking-block .give-bonus-btn { padding: 6px 14px !important; border: 1px solid #ddd !important; background: #fff !important; color: var(--hr-text) !important; white-space: nowrap; } .overallRanking-block .give-bonus-btn:hover { border-color: var(--hr-text) !important; } .overallRanking-block .rankingTable td:last-child { white-space: nowrap; } .overallRanking-block .set-rank-input { width: 52px; height: 32px; padding: 0 8px; border: 1px solid #d6d6d6; border-radius: 10px; } .overallRanking-block .set-rank-btn { height: 32px; min-width: 44px !important; margin-left: 4px; } .overallRanking-block .actionBtns { margin-top: 18px; } .overallRanking-block hr, .thank-page hr { height: 1px; border: 0; background: var(--hr-line); color: var(--hr-line); opacity: 1; } .overallRanking-block .submission-controls { padding: 6px 0 0; } .overallRanking-block .submitrankingbutton { min-width: 240px; height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; } .overallRanking-block .launch2phase-block { font-size: 14px; color: var(--hr-muted); } .overallRanking-block .launch2phase { font-weight: 700; color: var(--hr-accent); } /* family & friends: the entries to share as tiles, then the emails */ .view-project-nav ~ section .form-box, .invite-friends .form-box { border-color: var(--hr-line); } .horizontalScrollBar .item { border-radius: 14px; background-size: cover; background-position: center; overflow: hidden; } .horizontalScrollBar .item strong { display: inline-block; margin: 8px; padding: 2px 9px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--hr-text); } #invitedList .table { font-size: 14px; } #invitedList .form-group.with-btn .form-control { height: 46px; border-radius: 12px; } #invitedList .form-group.with-btn .btn, #sendInvitation { border-radius: 999px; font-weight: 700; } /* thank you: the rating, the feedback, sharing */ .thank-page { max-width: 760px; } .thank-page h3 { font-size: 32px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 6px; } .thank-page h5 { font-size: 16px; font-weight: 600; color: var(--hr-muted); } .thank-page hr { margin: 26px 0; } .thank-page .rate-box { margin: 16px 0 0; padding: 0; list-style: none; } .thank-page .rate-box li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hr-line); } .thank-page .rate-box li label { order: -1; margin: 0; font-size: 15px; color: var(--hr-text); } .thank-page .rate-box-total-score { margin-top: 14px; font-size: 15px; text-align: right; } .thank-page h4 { font-size: 20px; font-weight: 800; } .thank-page textarea.form-control { border: 1px solid #d6d6d6; border-radius: 14px; } .thank-page .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; } .thank-page .feedback-btn { border-radius: 999px; font-weight: 700; padding: 10px 22px; } .thank-page .socialLinks ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; } @media (max-width: 991px) { .overallRanking-block .rankingTable td img { width: 72px !important; height: 54px !important; } } /* ---- About (views/site/pages/about_redesign.php): what we do beside a winning design, our numbers, the name, the * story as a timeline, clients' stories (the homepage's), the people, where to find us ---- */ .ab-page { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .ab-page p { font-size: inherit; } .ab-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; } .ab-hero--text { grid-template-columns: minmax(0, 760px); } .ab-hero h1 { margin: 0 0 14px; font-size: 42px; line-height: 1.12; letter-spacing: -.9px; text-wrap: balance; } .ab-lead { margin: 0 0 12px; font-size: 18px !important; color: var(--hr-text); } .ab-origin { margin: 0 0 22px; color: var(--hr-muted); } .ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; } .ab-hero__image { margin: 0; } .ab-hero__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; background: var(--hr-soft); } .ab-hero__image figcaption { margin-top: 8px; font-size: 13px; color: var(--hr-muted); } .ab-hero__image figcaption a { color: inherit; text-decoration: none; } .ab-hero__image figcaption a:hover { color: var(--hr-text); text-decoration: underline; } .ab-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ab-numbers > div { padding: 18px 20px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .ab-numbers strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; } .ab-numbers span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--hr-muted); } .ab-name { max-width: 860px; } .ab-name p:last-child { margin: 0; font-size: 22px !important; font-weight: 700; line-height: 1.45; letter-spacing: -.2px; } .ab-timeline { position: relative; margin: 6px 0 0; padding: 0; list-style: none; max-width: 860px; } .ab-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 52px; width: 2px; background: var(--hr-line); } .ab-timeline li { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; padding: 10px 0; } .ab-timeline li::before { content: ""; position: absolute; top: 18px; left: 47px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--hr-accent); box-shadow: 0 0 0 1px var(--hr-accent); } .ab-timeline__year { font-size: 15px; font-weight: 800; line-height: 28px; } .ab-timeline p { margin: 0; padding-left: 14px; font-size: 16px !important; line-height: 28px; } .ab-press { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; } .ab-press .hr-muted { margin-right: 4px; font-size: 13px; } .ab-page .ab-people__title { margin: 40px 0 14px; font-size: 20px; font-weight: 800; } .ab-people__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ab-people__grid--founder { grid-template-columns: minmax(0, 820px); } .ab-person { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .ab-person img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--hr-soft); } .ab-people__grid--founder .ab-person { padding: 20px; } .ab-people__grid--founder .ab-person img { width: 132px; height: 132px; border-radius: 18px; } .ab-people__grid--founder .ab-person h3 { font-size: 20px; } .ab-person h3 { margin: 2px 0 2px; font-size: 17px; font-weight: 800; } .ab-person__role { margin: 0; font-size: 13px !important; line-height: 1.45; color: var(--hr-muted); } .ab-person__bio { margin: 10px 0 0; font-size: 14px !important; line-height: 1.6; color: #333; } .ab-person__bio a { color: var(--hr-accent); font-weight: 700; } .ab-visit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; padding: 26px 30px; border-radius: 22px; background: var(--hr-soft); } .ab-visit h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; } .ab-visit p { margin: 0; } @media (max-width: 991px) { .ab-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; } .ab-hero__image { order: -1; } .ab-hero h1 { font-size: 32px; } .ab-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-people__grid, .ab-people__grid--founder { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .ab-numbers strong { font-size: 24px; } .ab-name p:last-child { font-size: 18px !important; } .ab-timeline::before { left: 52px; } .ab-timeline li { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; } .ab-timeline li::before { left: 47px; } .ab-people__grid--founder .ab-person { flex-direction: column; } } /* ---- Static pages: About, Contact, Privacy Policy, Terms (views/site/pages/about_new, contact_new, policy_new, tos_new; * .pg-page): a large title, the profile's tabs, the picture-and-text blocks rounded within the page, the legal text as * a reading column beside its contents; the pages' content and scripts unchanged ---- */ .pg-page > .bg-light-gray, .pg-page .page-aboutus > .bg-light-gray { padding: 20px 0 6px !important; background: none; } .pg-page h2.pt-3 { margin: 0; padding-top: 0 !important; font-size: 34px; font-weight: 800; letter-spacing: -.6px; } .pg-page .list-items-tabs.panel { max-width: 1600px; margin: 0 auto 22px; padding: 0 var(--hr-gutter); background: none; } .pg-page .list-items-tabs.panel .wrap { max-width: none; padding: 0; } .pg-page .list-items-tabs.panel ul { display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--hr-line); white-space: nowrap; } .pg-page .list-items-tabs.panel ul li { margin: 0; flex: none; } .pg-page .list-items-tabs.panel ul li .tab { padding: 12px 0; margin-bottom: -1px; font-size: 14px; font-weight: 700; color: var(--hr-muted); } .pg-page .list-items-tabs.panel ul li .tab.active { color: var(--hr-text); border-color: var(--hr-text); } /* a picture beside its text (About, Team, the legal pages' introduction): one rounded block within the page */ :is(.pg-page, .pg-page ~ .page-text) .row.space-65.bg-light-red { max-width: calc(1600px - 2 * var(--hr-gutter)); margin: 0 auto 10px; margin-left: max(var(--hr-gutter), calc((100% - 1600px) / 2 + var(--hr-gutter))); margin-right: max(var(--hr-gutter), calc((100% - 1600px) / 2 + var(--hr-gutter))); border-radius: 22px; background: var(--hr-soft); overflow: hidden; } :is(.pg-page, .pg-page ~ .page-text) .row.space-65.bg-light-red > .item { padding-left: 36px; } .pg-page .our-aim { margin-top: 26px; } .pg-page .our-aim h3, .pg-page h2.d-md-block, .pg-page ~ .page-text h3 { font-weight: 800; letter-spacing: -.4px; } .pg-page .page-aboutus > #aboutus > div > img.w-100, .pg-page #aboutus > div > img { display: block; width: calc(100% - 2 * var(--hr-gutter)) !important; max-width: 1536px; margin: 26px auto 0; border-radius: 22px; } /* About's numbers */ .pg-page .statistic { margin-top: 22px; padding: 0 var(--hr-gutter); } .pg-page .statistic .row.space-65 { max-width: 1536px; margin: 0 auto; } .pg-page .statistic .bg-light-red p { margin: 0; padding: 18px 22px; font-size: 16px; } .pg-page .statistic .item { padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; font-size: 14px; color: var(--hr-muted); } .pg-page .statistic .item span { display: block; font-size: 28px; font-weight: 800; color: var(--hr-text); } .pg-page .statistic .bg-light-red { border-radius: 22px; background: var(--hr-soft); } .pg-page .team-item .img { border-radius: 16px; } .pg-page .team-item .name { margin-top: 10px; font-weight: 800; } .pg-page .team-item .role { font-size: 13px; color: var(--hr-muted); } /* Contact */ .pg-page .page-contacts .info { max-width: calc(1600px - 2 * var(--hr-gutter)); margin: 0 auto; margin-left: max(var(--hr-gutter), calc((100% - 1600px) / 2 + var(--hr-gutter))); margin-right: max(var(--hr-gutter), calc((100% - 1600px) / 2 + var(--hr-gutter))); border-radius: 22px; background: var(--hr-soft); overflow: hidden; } .pg-page .page-contacts .info h1 { font-size: 32px; font-weight: 800; letter-spacing: -.6px; } .pg-page .page-contacts .emails .item { padding: 14px 0; border-bottom: 1px solid var(--hr-line); } .pg-page .page-contacts .emails .item strong { display: block; margin-bottom: 4px; font-size: 14px; } /* Privacy Policy and Terms: the text as a column, its contents beside it */ .pg-page ~ .page-text .item h4 { margin-top: 10px; font-size: 20px; font-weight: 800; } .pg-page ~ .page-text .item p, .pg-page ~ .page-text .item li { font-size: 15px; line-height: 1.7; color: #333; } .pg-page ~ .page-text .col-md-8 { max-width: 780px; } .pg-page ~ .page-text .rubrics-box { position: sticky; top: 90px; padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fafafa; } .pg-page ~ .page-text .rubrics-box .nav-link { padding: 6px 0; font-size: 14px; color: var(--hr-muted); } .pg-page ~ .page-text .rubrics-box .nav-link.active { font-weight: 700; color: var(--hr-text); } .pg-page ~ .page-text .section-head.bg-light-red { margin-top: 30px; padding: 22px 26px; border-radius: 22px; background: var(--hr-soft); } @media (max-width: 767px) { .pg-page h2.pt-3 { font-size: 27px; } :is(.pg-page, .pg-page ~ .page-text) .row.space-65.bg-light-red > .item { padding-left: 20px; } } /* ---- Login, sign up and password (layout noNav_new): the form on the left under the logo, a winning design with its * client's words on the right (views/common/_auth_aside.php, computers only); the forms' markup is unchanged ---- */ body.sa-auth { padding-top: 0; background: #fff; } .sa-auth__page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; } .sa-auth__page:not(:has(.sa-auth__aside)) { grid-template-columns: minmax(0, 1fr); } .sa-auth__main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; padding: 0 var(--hr-gutter); } .sa-auth__bar { display: flex; width: 100%; max-width: 420px; margin: 0 auto; padding: 30px 0 0; } .sa-auth__bar img { display: block; width: auto; height: 27px; } .sa-auth__main > .bg-light-gray { background: none; } .sa-auth__main > section { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; } .sa-auth .login-container, .sa-auth .auth-form-container { width: 100%; max-width: 420px; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: none; box-shadow: none; } .sa-auth .login-signup-box, .sa-auth .login-signup-box.full-page { max-width: none; overflow: visible !important; } .sa-auth h3 { margin-bottom: 8px !important; font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.6px; text-align: left !important; } .sa-auth h3 + p { margin-bottom: 26px !important; padding-bottom: 0 !important; font-size: 15px; color: var(--hr-muted); text-align: left !important; } .sa-auth .form-group { position: relative; margin-bottom: 12px; } .sa-auth .form-group .form-control { height: 52px; border: 1px solid #d6d6d6; border-radius: 12px; background: #fff; font-size: 15px; color: var(--hr-text); box-shadow: none; } .sa-auth .form-group .form-control:hover { border-color: #b5b5b5; } .sa-auth .form-group .form-control:focus { border-color: var(--hr-text); box-shadow: 0 0 0 3px rgba(34, 34, 34, .08); } .sa-auth .form-group .ico { top: 26px; left: 17px; font-size: 16px; color: var(--hr-muted); } .sa-auth .form-group .ico + .form-control { padding-left: 44px; } .sa-auth .form-group.has-reveal .form-control { padding-right: 68px; } .sa-auth__reveal { position: absolute; top: 26px; right: 10px; transform: translateY(-50%); padding: 4px 8px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 700; color: var(--hr-muted); } .sa-auth__reveal:hover { color: var(--hr-text); background: var(--hr-soft); } /* "Forgot?" under the password, on the right */ .sa-auth .login-signup-box .row #LoginForgotLink { position: absolute; top: 58px; right: 2px; z-index: 2; font-size: 13px; } .sa-auth #LoginForm .row.mb-2 { margin-bottom: 34px !important; } .sa-auth .errorMessage { margin-top: 6px; font-size: 13px; color: var(--hr-accent); text-align: left !important; } .sa-auth .errorSummary { margin-bottom: 16px; padding: 12px 14px; border: 0; border-radius: 12px; background: #fbeaec; font-size: 14px; color: #8d2a3a; } .sa-auth .errorSummary p { margin: 0 0 4px; font-weight: 700; } .sa-auth .errorSummary ul { margin: 0; padding-left: 18px; } .sa-auth .buttons { margin-bottom: 0 !important; padding-top: 6px !important; } .sa-auth .btn-primary.btn-lg { height: 52px; border-radius: 999px; font-size: 16px; font-weight: 700; } .sa-auth .normalLink { font-weight: 700; color: var(--hr-accent) !important; } .sa-auth .text-gray-2 { font-size: 13px; color: var(--hr-muted) !important; } .sa-auth .alreadyContainer { margin-top: 26px; text-align: center; } .sa-auth .sa-social ~ .alreadyContainer { margin-top: 0; } /* social sign up from login without an account: Client or Designer as the two buttons */ .sa-auth .sa-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sa-auth .login-signup-box #AlreadyMsg { font-size: 14px; color: var(--hr-text); } .sa-auth .MessageBeforeLogin { margin: 0 0 18px; padding: 12px 14px; border: 0; border-radius: 12px; background: #eef6f0; font-size: 14px; color: #2f6b4f; } .sa-auth .MessageBeforeLogin p { margin: 0 !important; font-size: inherit; } .sa-auth .MessageBeforeLogin.is-error { background: #fbeaec; color: #8d2a3a; } .sa-auth__back { margin: 22px 0 0; font-size: 14px; text-align: center; } /* sign up: "I am a:" Client / Designer as two cards, each with a line under it */ .sa-auth .login-signup-box #UserTypeRow { display: block; margin: 0 0 18px; font-size: 14px; } .sa-auth .login-signup-box #UserTypeRow > * { padding: 0; } .sa-auth .login-signup-box #UserTypeRow > .fw-bolder { margin-bottom: 8px; font-size: 14px; } .sa-auth #RegistrationForm_type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sa-auth #RegistrationForm_type input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; } .sa-auth #RegistrationForm_type label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 74px; margin: 0; padding: 12px 14px; border: 1px solid #d6d6d6; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; } .sa-auth #RegistrationForm_type label b { font-size: 15px; color: var(--hr-text); } .sa-auth #RegistrationForm_type label small { font-size: 12.5px; line-height: 1.35; color: var(--hr-muted); } .sa-auth #RegistrationForm_type label:hover { border-color: #999; } .sa-auth #RegistrationForm_type input:checked + label { border-color: var(--hr-text); background: #fafafa; box-shadow: inset 0 0 0 1px var(--hr-text); } .sa-auth #RegistrationForm_type input:focus-visible + label { outline: 2px solid var(--hr-text); outline-offset: 2px; } .sa-auth .user-type-separator { display: none; } /* signing up with Facebook: their picture, then Sign up or link to an existing account */ .sa-auth .fb-img-wrapper .fb-img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; } .sa-auth__legal { margin: 0; border: 0; background: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding: 0 0 26px; font-size: 13px; } .sa-auth__legal a { color: var(--hr-muted); text-decoration: none; } .sa-auth__legal a:hover { color: var(--hr-text); text-decoration: underline; } .sa-auth__aside { position: sticky; top: 12px; display: flex; align-items: flex-end; height: calc(100vh - 24px); margin: 12px 12px 12px 0; overflow: hidden; border-radius: 24px; background: var(--hr-soft) center / cover no-repeat; } .sa-auth__aside::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 70%); } .sa-auth__quote { position: relative; max-width: 600px; margin: 0; padding: 36px; color: #fff; } .sa-auth__label { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); font-size: 12px; font-weight: 700; } .sa-auth__quote blockquote { margin: 0 0 12px; font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.2px; } .sa-auth__quote figcaption { font-size: 14px; opacity: .85; } @media (max-width: 991px) { .sa-auth__page { grid-template-columns: minmax(0, 1fr); } .sa-auth__aside { display: none; } } @media (max-width: 520px) { .sa-auth__main { padding: 0 20px; } .sa-auth__bar { justify-content: center; padding-top: 22px; } .sa-auth__main > section { align-items: flex-start; padding: 30px 0; } .sa-auth h3 { font-size: 27px; } .sa-auth #RegistrationForm_type { grid-template-columns: minmax(0, 1fr); } .sa-auth #RegistrationForm_type label { min-height: 0; } } /* ---- A client's My Home (views/user/client_home_new.php, client/_home_top_redesign.php): a greeting with the * competitions' state, the profile's tabs, and each competition as a card with its state in a pill ---- */ .arcfolioland .hr.cm-head { height: auto; margin: 0; background: none; } .cm-head { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; } .cm-head__inner { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px 22px; padding-top: 12px; padding-bottom: 22px; } .cm-head__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--hr-soft); } .cm-head__text h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; } .cm-head__state { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .cm-state { padding: 4px 12px; border: 1px solid #ddd; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--hr-text); text-decoration: none; background: #fff; } .cm-state--rank { border-color: #e9c85c; background: #fbf1cf; } .cm-state--live { border-color: #9fd3b4; background: #eef6f0; color: #2f6b4f; } .cm-head__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .cm-home .my-home-item { margin-bottom: 16px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; overflow: hidden; } .cm-home .my-home-item .head { padding: 12px 18px 0; border-radius: 0; background: none; font-size: 13px; font-weight: 700; color: var(--hr-muted); } .cm-home .my-home-item .head > div { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; background: #f3f3f3; color: var(--hr-text); } .cm-home .my-home-item .head > div i { display: none; } .cm-home .my-home-item .head > div::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #999; } .cm-home .my-home-item.is-live .head > div { background: #eef6f0; color: #2f6b4f; } .cm-home .my-home-item.is-live .head > div::before { background: #2f6b4f; } .cm-home .my-home-item.is-rank .head > div { background: #fbf1cf; color: #6b5310; } .cm-home .my-home-item.is-rank .head > div::before { background: #d9a520; } .cm-home .my-home-item.no-active .head > div, .cm-home .my-home-item.is-cancelled .head > div { color: var(--hr-muted); } .cm-home .my-home-item.is-live, .cm-home .my-home-item.no-active { background: #fff; } .cm-home .my-home-item .body { gap: 0; padding: 12px 18px 18px; } .cm-home .my-home-item .img { flex: 0 0 240px; width: 240px; min-height: 170px; border-radius: 14px; } .cm-home .my-home-item.no-active .img { opacity: .45; } .cm-home .my-home-item.no-active h4, .cm-home .my-home-item.no-active h6, .cm-home .my-home-item.no-active .tag-competitions { opacity: 1; } /* the Following tab (views/user/_follow_new.php): the Top 50's cards (FollowRedesign); a design without pictures */ .cm-follow .sr-empty { padding: 8px 0 40px; font-size: 15px; } .cm-follow .sr-empty .hr-link { margin-left: 6px; } .cm-home .list-items .item .img.no-shadow { display: flex; align-items: center; justify-content: center; box-shadow: none !important; font-size: 13px; color: var(--hr-muted); } .cm-home .list-items .item .img.no-shadow > div { margin: 0 !important; } .cm-home .my-home-item .descr { padding: 4px 0 0 22px; } .cm-home .my-home-item h4, .cm-home .my-home-item h6 { font-size: 19px; line-height: 1.3; } .cm-home .my-home-item .price { font-size: 22px; color: var(--hr-text); } .cm-home .my-home-item .descr .btn { border-radius: 999px; font-size: 14px; padding: 9px 20px; } .cm-home .my-home-item .footer { padding: 18px; border-top: 1px solid var(--hr-line); } @media (max-width: 991px) { .cm-head__inner { grid-template-columns: 56px minmax(0, 1fr); } .cm-head__photo { width: 56px; height: 56px; } .cm-head__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; } .cm-head__text h1 { font-size: 26px; } .cm-home .my-home-item .body { flex-direction: column; } .cm-home .my-home-item .img { width: 100%; flex-basis: auto; min-height: 180px; } .cm-home .my-home-item .descr { padding: 14px 0 0; } } /* the competitions grouped by state (client_home_new), each as one card (client/_client_project_item_redesign.php): * picture | state, name, place and a row of facts | the actions in one column; a completed one adds its privacy * switches and follow-ups in a band below */ .cm-list { padding-top: 8px; padding-bottom: 30px; color: var(--hr-text); } .cm-group { margin: 0 0 30px; } .cm-group > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; } .cm-group > h2 span { min-width: 26px; padding: 1px 9px; border-radius: 999px; background: #f1f1f1; font-size: 13px; text-align: center; color: var(--hr-muted); } .cm-card { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; gap: 0 24px; align-items: center; margin: 0 0 12px; padding: 14px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .cm-card__img { align-self: stretch; min-height: 140px; border-radius: 12px; background: var(--hr-soft) center / cover no-repeat; } .cm-card--draft .cm-card__img, .cm-card--cancelled .cm-card__img { opacity: .55; } .cm-card__main { min-width: 0; padding: 4px 0; } .cm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; } .cm-card__state { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; background: #f3f3f3; font-size: 12px; font-weight: 700; } .cm-card__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #999; } .cm-card--live .cm-card__state { background: #eef6f0; color: #2f6b4f; } .cm-card--live .cm-card__state::before { background: #2f6b4f; } .cm-card--rank .cm-card__state { background: #fbf1cf; color: #6b5310; } .cm-card--rank .cm-card__state::before { background: #d9a520; } .cm-card--done .cm-card__state::before { background: var(--hr-text); } .cm-card__cat { font-size: 12px; font-weight: 600; color: var(--hr-muted); } .cm-card h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; overflow-wrap: anywhere; } .cm-card__place { margin: 2px 0 0; font-size: 13px; color: var(--hr-muted); } .cm-card__hint { margin: 10px 0 0; font-size: 14px; color: var(--hr-muted); } .cm-card__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #f0f0f0; } .cm-card__facts dt { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hr-muted); } .cm-card__facts dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .cm-card__facts .cm-card__award { font-size: 17px; font-weight: 800; } .cm-card__clock.is-soon { color: var(--hr-accent); } .cm-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .cm-card__actions .hr-primary, .cm-btn { padding: 10px 18px; font-size: 14px; text-align: center; } .cm-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: var(--hr-text) !important; font-weight: 700; text-decoration: none; white-space: nowrap; } .cm-btn:hover { border-color: var(--hr-text); } .cm-card__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 2px 0 0; font-size: 13px; } .cm-card__links a { color: var(--hr-muted); font-weight: 600; text-decoration: underline; } .cm-card__links a:hover, .cm-card__delete:hover { color: var(--hr-accent); } .cm-card .project-delete-form { margin: 0; text-align: center; } .cm-card__delete { padding: 2px 0; border: 0; background: none; font-size: 13px; font-weight: 600; text-decoration: underline; color: var(--hr-muted); cursor: pointer; } .cm-card__more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 14px -14px -14px; padding: 14px; border-top: 1px solid var(--hr-line); border-radius: 0 0 18px 18px; background: #fafafa; } .cm-card__more h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; } .cm-card__switches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } .cm-card__switches .form-check { display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0; font-size: 13px; } .cm-card__switches .form-check-input { margin: 0; cursor: pointer; } .cm-card__follow { display: flex; flex-wrap: wrap; gap: 8px; } .cm-list > .sa-app--card { margin-top: 10px; } .cm-empty { max-width: 560px; padding: 30px 0 40px; } .cm-empty h2 { margin: 0 0 6px; font-size: 24px; } .cm-empty p { margin: 0 0 18px; color: var(--hr-muted); } @media (max-width: 991px) { .cm-card { grid-template-columns: 150px minmax(0, 1fr); gap: 14px 18px; } .cm-card__img { min-height: 110px; } .cm-card__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; } .cm-card__actions .hr-primary, .cm-card__actions > .cm-btn { flex: 1 1 140px; } .cm-card__links { flex-basis: 100%; justify-content: flex-start; } .cm-card .project-delete-form { order: -1; } } @media (max-width: 575px) { .cm-card { grid-template-columns: minmax(0, 1fr); } .cm-card__img { min-height: 140px; } .cm-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } } /* ---- The error page (views/site/error_redesign.php) ---- */ .er-page__inner { padding-top: 50px; padding-bottom: 30px; } .er-page__inner > * { max-width: 760px; } .er-page__inner h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.8px; margin: 0 0 10px; } .er-page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .er-page__links { margin: 0; } @media (max-width: 767px) { .er-page__inner { padding-top: 24px; } .er-page__inner h1 { font-size: 30px; } } /* ---- The map, "Arcbazar around the world" (views/portfolio/map_new.php): the filters as chips, each with its pins' * colour; the map with rounded corners in the page's gutter; the statistics in the shared look ---- */ .mp-head .hr-section { padding-bottom: 8px; } .mp-head h1 { font-size: 34px; margin: 0 0 4px; } .mp-filters { max-width: 1600px; margin: 0 auto 16px !important; padding: 0 var(--hr-gutter); background: none !important; } .mp-filters .filter { padding: 0; background: none; } .mp-filters.competitions-filter .filter .switches, .mp-filters #competition-switcher .item { border: 0; } /* the old filter bar drew a line after the chips */ .mp-filters #competition-switcher { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; } .mp-filters #competition-switcher .item { margin: 0; padding: 0; } .mp-filters #competition-switcher .form-check { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0; padding: 7px 15px 7px 12px; border: 1px solid #ddd; border-radius: 999px; background: #fff; } .mp-filters #competition-switcher .form-check::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pin, #222); } .mp-filters #competition-switcher .form-check:has(.orange) { --pin: #fdaa34; } .mp-filters #competition-switcher .form-check:has(.pink) { --pin: #e455a5; } .mp-filters #competition-switcher .form-check:has(.green) { --pin: #7eb32f; } .mp-filters #competition-switcher .form-check:has(.red) { --pin: #f61111; } .mp-filters #competition-switcher .form-check:has(.blue) { --pin: #45c2e2; } .mp-filters #competition-switcher .form-check-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .mp-filters #competition-switcher .form-check label { margin: 0; font-size: 13px; font-weight: 700; color: var(--hr-text); text-transform: none; letter-spacing: 0; } .mp-filters #competition-switcher .form-check:has(input:checked) { border-color: var(--hr-text); background: var(--hr-text); } .mp-filters #competition-switcher .form-check:has(input:checked) label { color: #fff; } .mp-filters #competition-switcher .form-check:has(input:focus-visible) { outline: 2px solid var(--hr-text); outline-offset: 2px; } .mp-page #map_container { max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); } .mp-page #map_canvas { border-radius: 18px; overflow: hidden; } .mp-page h2, .mp-page h3, .mp-page h4 { letter-spacing: -.3px; } .mp-page .box, .mp-page .totals-digits { border-radius: 16px; } .mp-page .totals-digits { background: var(--hr-soft); } .mp-page .bg-light-red.miscellaneous { background: var(--hr-soft); } @media (max-width: 767px) { .mp-head h1 { font-size: 28px; } } /* ---- The cost guide (views/site/cost_index.php, cost.php; its own styles in _cost_style.php) in the redesign's * spacing, type, button, cards and questions ---- */ .site-redesign .cost-guide { max-width: 1600px; padding: 10px var(--hr-gutter) 48px; color: var(--hr-text); } .site-redesign .cost-guide h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.6px; margin: 4px 0 10px; } .site-redesign .cost-guide h2 { font-size: 23px; letter-spacing: -.4px; margin: 34px 0 14px; } .site-redesign .cost-lead { font-size: 17px; color: var(--hr-muted); } .site-redesign .cost-figures div { border-color: var(--hr-line); border-radius: 16px; background: #fafafa; } .site-redesign .cost-figures strong { font-size: 26px; font-weight: 800; } .site-redesign .cost-cta { background: var(--hr-accent); padding: 14px 24px; font-size: 15px; } .site-redesign .cost-cta:hover { background: var(--hr-accent-dark); } .site-redesign .cost-table th { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--hr-muted); } .site-redesign .cost-table td { font-size: 15px; font-variant-numeric: tabular-nums; } .site-redesign .cost-table td a { font-weight: 700; color: var(--hr-text); } .site-redesign .cost-examples img { border-radius: 14px; } .site-redesign .cost-examples a > :not(img):first-of-type { font-weight: 700; } .site-redesign .cost-faq { border-color: var(--hr-line); padding: 0; } .site-redesign .cost-faq summary { padding: 15px 0; font-size: 16px; font-weight: 700; } .site-redesign .cost-faq p { margin: 0 0 16px; font-size: 15px; color: #444; max-width: 72ch; } /* ---- Open for voting: the list (views/competition/index_voting_redesign.php) and a competition's page * (views/project/viewArcfolioUnderReview_new.php): the running competition's top, the profile's tabs, the entries as cards ---- */ .vt-note { max-width: 760px; margin: -8px 0 22px; padding: 12px 16px; border-radius: 14px; background: #fbf1cf; font-size: 14px; line-height: 1.55; color: #5b4710; } .vt-head { color: var(--hr-text); font-size: 15px; line-height: 1.6; } .vt-head .sh-lead { margin: 6px 0 12px; font-size: 16px; } /* the votes filter (All, Clients, Popular, Experts) beside the tabs, as a pill */ .vt-page .list-items-tabs.panel { padding-right: calc(var(--hr-gutter) + 190px); } .arcfolioland.vt-page .list-items-tabs + .right-filters { position: absolute; top: 4px; bottom: auto; right: max(var(--hr-gutter), calc((100% - 1600px) / 2 + var(--hr-gutter))); left: auto; min-width: 0; margin: 0; background: none; } .vt-page .right-filters > div { width: auto; max-width: none; flex: none; padding: 0; } .arcfolioland.vt-page .right-filters .dropdown.selectable .dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--hr-text); } .vt-page .right-filters .sortby label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--hr-muted); } .arcfolioland.vt-page .right-filters .dropdown.selectable .dropdown-toggle::after { position: static; order: 3; margin: 0; transform: none; } @media (max-width: 767px) { .vt-page .list-items-tabs.panel { padding-right: var(--hr-gutter); margin-bottom: 12px; } .arcfolioland.vt-page .list-items-tabs + .right-filters { position: static; padding: 0 var(--hr-gutter) 16px; } } /* ---- A design entry (views/designerSubmission/publicView_new.php): the finished competition's top with this design, * its ratings and the vote button; the profile's tabs; the gallery and the other entries as cards ---- */ .de-page .sc-hero__image { cursor: zoom-in; } .de-page .sc-hero__media > .img-action { top: 14px; right: 14px; } .de-page .sc-ratings .vote-btn { margin-top: 14px; } .de-page .sc-ratings .vote-btn .btn { padding: 11px 22px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 700; } .de-page .sc-ratings .vote-btn .btn-primary { background: var(--hr-accent); } .de-page .list-items-tabs.panel .panel { background: none; } .de-page > .hr:not(.de-head) { display: none; } .de-page > .wrap > h3 { margin: 10px 0 22px !important; font-size: 24px; font-weight: 800; } /* ---- A team's profile (views/user/view_new.php for a team): the designer's top with the team's name and members; the members * (views/user/_team_members_new.php) as the Top 50's cards ---- */ .sp-profile .sp-members { max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); } /* ---- My bank (views/finance/myBank_new.php): the designer's My Home top and tabs, the balance as three figures with * Withdraw, the payments as a table in a box; the withdraw form (_withdraw_new_request_new) unchanged ---- */ .bk-page .earnings-section > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } .bk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; } .bk-head h2 { margin: 0; font-size: 26px; font-weight: 800; } .bk-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 30px; } .bk-summary > div { padding: 18px 20px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fafafa; } .bk-summary > div:first-child { background: #fff; border-color: var(--hr-text); } .bk-summary dt { font-size: 13px; font-weight: 600; color: var(--hr-muted); } .bk-summary dd { margin: 4px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--hr-text); } .bk-history { margin: 0 0 12px; font-size: 18px; font-weight: 800; } .bk-page .earnings-section .table-wrap { border: 1px solid var(--hr-line); border-radius: 16px; overflow-x: auto; } .bk-page .earnings-section .table-wrap .table { margin: 0; } .bk-page .earnings-section .table-wrap .table tr th { background: #fafafa; font-size: 12px; font-weight: 700; text-transform: none; color: var(--hr-muted); } .bk-page .bk-empty { padding: 26px 16px !important; text-align: center; color: var(--hr-muted); } @media (max-width: 700px) { .bk-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; } .bk-summary dd { font-size: 24px; } } /* ---- A designer's team, new and edit (views/teamManage/create_new.php, update_new.php), and editing a portfolio work * (views/designerWork/update_new.php): the designer's My Home top and tabs; the forms as cards; their scripts unchanged ---- */ :is(.tm-page, .pw-page) > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } :is(.tm-page, .pw-page) > .wrap h3, :is(.tm-page, .pw-page) > .wrap h4 { margin: 4px 0 0; font-size: 26px; font-weight: 800; } :is(.tm-page, .pw-page) > .wrap h4 { font-size: 20px; } :is(.tm-page, .pw-page) > .wrap .divider-32, :is(.tm-page, .pw-page) > .wrap .divider-40, :is(.tm-page, .pw-page) > .wrap .divider-20 { height: 16px; } .tm-lead { max-width: 760px; margin: 6px 0 0; font-size: 15px; color: var(--hr-muted); } .tm-lead .hr-link { margin-left: 6px; } .arcfolioland:is(.tm-page, .pw-page) > .hr { display: none; } :is(.tm-page, .pw-page) .form-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; max-width: 1600px; margin: 0 auto 10px; padding: 0 var(--hr-gutter); border: 0; } :is(.tm-page, .pw-page) .form-box > div { padding: 20px 22px; border: 1px solid var(--hr-line) !important; border-radius: 16px; background: #fff; } :is(.tm-page, .pw-page) .form-box .body-l-bold { margin-bottom: 12px !important; font-size: 15px; } :is(.tm-page, .pw-page) .form-box .divider-40, :is(.tm-page, .pw-page) .form-box .divider-20 { display: none !important; } :is(.tm-page, .pw-page) .form-box .btn-primary { padding: 10px 22px; border: 0; border-radius: 999px; background: var(--hr-accent); font-weight: 700; } :is(.tm-page, .pw-page) .form-box .btn-secondary { border-radius: 999px; font-weight: 700; } :is(.tm-page, .pw-page) .form-box .text-green { color: var(--hr-text) !important; } .pw-page .form-box h5 { display: flex; align-items: center; margin: 0 0 16px; font-size: 17px; font-weight: 800; } .pw-page .form-box h5 .badge { border-radius: 999px; font-size: 11px; } .pw-page .form-box-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pw-page .form-box-action .btn { margin: 0 !important; padding: 10px 22px; border-radius: 999px; font-weight: 700; } .pw-page .form-box-action .btn-primary { border: 0; background: var(--hr-accent); } .pw-page .form-box-action .btn-delete { border: 0; background: none; color: #b42318; } .pw-page .form-box-action [class*=divider-] { flex-basis: 100%; } /* ---- "Verify your email" and "Email verified" (views/site/verifyEmail_redesign.php, emailVerified_redesign.php): the * error page's layout with an envelope or a tick ---- */ .ve-page__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--hr-soft); } .ve-page__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--hr-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ve-page__icon--done { background: #e6f4ea; } .ve-page__icon--done svg { stroke: #1e7b3a; stroke-width: 2.2; } .ve-page .sh-lead b { font-weight: 800; } .ve-page__tips { margin: 0 0 24px; padding-left: 20px; font-size: 15px; line-height: 1.7; color: #444; } .ve-page__tips a { font-weight: 700; color: var(--hr-text); } /* ---- A client's public profile (views/user/client/client_view_new.php, ClientDetailsRedesign): the designer * profile's top with the client's facts and competition counts; the profile's tabs; the competitions as cards ---- */ .cp-head__company { height: 26px; width: auto; border-radius: 6px; } .cp-head__about { margin: 4px 0 0; font-size: 14px; color: var(--hr-muted); } .cp-head__about b { color: var(--hr-text); } .cp-head__contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 14px; } .cp-head__contact a { font-weight: 700; color: var(--hr-text); } .cp-profile #finished-contests, .cp-profile #active-contests, .cp-profile #comments { max-width: 1600px; margin: 26px auto 50px !important; padding: 0 var(--hr-gutter); } .cp-profile .live-contests .item > div { border: 1px solid var(--hr-line); border-radius: 16px; overflow: hidden; background: #fff; } .cp-profile .live-contests .item .img-wrap { border: 0; } .cp-profile .live-contests .item .btn-vote { border: 0; border-radius: 999px; background: var(--hr-accent); font-weight: 700; } .cp-profile .tab-content > h4 { padding: 0 !important; font-size: 16px; color: var(--hr-muted); } /* ---- Projects built (views/project/implemented_index_redesign.php, implemented_view_redesign.php): cards with the * photo of what was built; a project's page with the finished competition's top, the client's note, the facts, then * the photos, the winning design and the space before ---- */ .pb-card__image { position: relative; display: block; } .pb-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: #1e7b3a; font-size: 12px; font-weight: 800; color: #fff; } .sc-hero__media .pb-card__badge { top: 14px; left: 14px; padding: 6px 13px; } .pb-card__by { font-size: 13px; color: var(--hr-muted); } .pb-page__note { margin: 0 0 16px; padding: 14px 18px; border-left: 3px solid var(--hr-accent); background: var(--hr-soft); border-radius: 0 14px 14px 0; } .pb-page__note p { margin: 0; font-size: 15px; font-style: italic; } .pb-page__note footer { margin-top: 6px; padding: 0; background: none; font-size: 12px; font-weight: 700; color: var(--hr-muted); } .pb-page__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; } .pb-page__facts dt { font-size: 12px; font-weight: 600; color: var(--hr-muted); } .pb-page__facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; } .pb-page__facts dd a { color: var(--hr-text); } .pb-page__section h2 { margin: 0 0 6px; } .pb-page__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; } .pb-page__photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--hr-soft); } .pb-page__video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; } .pb-page__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } @media (max-width: 600px) { .pb-page__facts { grid-template-columns: minmax(0, 1fr); } } /* ---- The designer's Teams tab on My Home (views/user/_teams_new.php): how teams work as a card, each team as a card * with its picture, the invite and edit buttons as pills; markup unchanged ---- */ .dm-home #teams { margin-top: 0 !important; } .dm-home #teams > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } .dm-home #teams .divider-60 { height: 24px; } .dm-home #teams .mobile-collapse { padding: 20px 24px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fafafa; } .dm-home #teams .mobile-collapse h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; } .dm-home #teams .mobile-collapse .ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #444; } .dm-home #teams .team-list > p { margin: 0 0 10px; font-size: 14px; font-weight: 700; } .dm-home #teams .team-list .item { margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; } .dm-home #teams .team-list .item .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .dm-home #teams .team-list .item .img { flex: none; width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; } .dm-home #teams .team-list .item .name { font-size: 16px; font-weight: 800; } .dm-home #teams .team-list .item .down { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dm-home #teams .team-list .btn { margin: 0; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; } .dm-home #teams .team-list .btn-primary { border: 0; background: var(--hr-accent); } .dm-home #teams .team-list .btn-link { padding: 8px 4px; color: var(--hr-text); text-transform: none; } .dm-home #teams .team-list .hr { display: none; } /* ---- Settings and Public page on My Home (views/user/_profileform_new.php, client/_client_profileform_public_new.php, * _profileform_buttons_block_new.php, for clients and designers): the sub-tabs as chips, each form half as a card, the * buttons as pills. Delete account (views/user/delete_account_new.php, also edited by Vladimir for Pro: CSS only): * one card in the middle. Markup and scripts unchanged ---- */ :is(.cm-home, .dm-home) :is(#settings, #public) .bg-light-red { background: none; } :is(.cm-home, .dm-home) :is(#settings, #public) .bg-light-red > .wrap, :is(.cm-home, .dm-home) :is(#settings, #public) > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; border: 0; } :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs ul li { margin: 0; } :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs a.item { display: inline-block; padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--hr-text); text-decoration: none; } :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs a.item::after { display: none; } :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs a.item.active, :is(.cm-home, .dm-home) :is(#settings, #public) .custom-tabs a.item:hover { border-color: var(--hr-text); background: var(--hr-text); color: #fff; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; max-width: 1600px; margin: 18px auto 0; padding: 0 var(--hr-gutter); border: 0; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box > div { padding: 22px 24px; border: 1px solid var(--hr-line) !important; border-radius: 16px; background: #fff; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box h4 { font-size: 18px; font-weight: 800; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box .body-l-bold { font-size: 14px; font-weight: 700; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box [class*=divider-] { height: 14px; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box .hr { height: 1px; margin: 6px 0 14px; background: var(--hr-line); } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box .btn-primary { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--hr-text); font-weight: 700; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action > div.d-none { display: none !important; } @media (min-width: 768px) { :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action > div.d-md-block { display: flex !important; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action > div.d-md-none { display: none !important; } } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action [class*=divider-] { flex-basis: 100%; height: 22px; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action .btn { margin: 0 !important; padding: 11px 24px; border-radius: 999px; font-size: 15px; font-weight: 700; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action .btn-primary { border: 0; background: var(--hr-accent); } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action .btn-primary:disabled { opacity: .45; } :is(.cm-home, .dm-home) :is(#settings, #public) .form-box-action .btn-delete { border: 0; background: none; color: #b42318; } .site-redesign .container:has(> #delete-account-form) { max-width: 560px; margin: 0 auto; padding: 0 16px; } .site-redesign #delete-account-form { padding: 26px 28px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .site-redesign #delete-account-form h4 { margin: 0 0 16px; font-size: 22px; font-weight: 800; line-height: 1.3; } .site-redesign #delete-account-form .col-md-6 { flex: 0 0 100%; max-width: 100%; } .site-redesign #delete-account-form .alert { border-radius: 14px; font-size: 14px; } .site-redesign #delete-account-form .btn-danger { padding: 11px 24px; border: 0; border-radius: 999px; background: #b42318; font-weight: 700; } /* ---- The map's statistics (views/portfolio/_site_analytics_new.php under map_new.php): each chart as a card with its * text on the soft side, the top lists' switch as a pill, the four totals as tiles; charts and scripts unchanged ---- */ .mp-page .analytics-page { max-width: 1600px; margin: 34px auto 0; padding: 0 var(--hr-gutter); } .mp-page .analytics-page > .item, .mp-page .analytics-page > .row { margin: 0 0 18px; border: 1px solid var(--hr-line); border-radius: 18px; overflow: hidden; background: #fff; --bs-gutter-x: 0; } .mp-page .analytics-page > .row.pt-5 { padding: 0 !important; } .mp-page .analytics-page > .row.pt-5 > div { flex: 1 1 0; max-width: none; padding: 0; } .mp-page .analytics-page > .row.pt-5 > div:first-child { flex: 0 0 34%; background: var(--hr-soft); } .mp-page .analytics-page .bg-light-gray { background: var(--hr-soft) !important; } .mp-page .analytics-page [class*=divider-100], .mp-page .analytics-page .divider-60, .mp-page .analytics-page .divider-40 { height: 26px; } .mp-page .analytics-page .box { padding: 26px 30px; } .mp-page .analytics-page .row > [class*=col] > .box:first-child { padding-top: 30px; } .mp-page .analytics-page h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; font-weight: 800; color: var(--hr-text); } .mp-page .analytics-page .box p { font-size: 15px; color: var(--hr-muted); } .mp-page .analytics-page img[src*=spiral_arrow] { display: none !important; } .mp-page .analytics-page .nav-pills .btn { padding: 7px 15px; border: 1px solid #ddd; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--hr-text); } .mp-page .analytics-page .nav-pills .btn.active { border-color: var(--hr-text); background: var(--hr-text); color: #fff; } .mp-page .analytics-page .table-header { padding: 10px 14px; border-radius: 12px; background: var(--hr-soft) !important; } .mp-page .analytics-page .table-header .nav-link { color: var(--hr-text); font-weight: 700; } /* the totals: a heading, then four tiles */ .mp-page .analytics-page > .row.mt-5.text-center { margin: 30px 0 12px !important; border: 0; border-radius: 0; background: none; text-align: left !important; } .mp-page .analytics-page > .row.mt-5.text-center h3 { padding: 0; } .mp-page .analytics-page .miscellaneous { margin: 0 0 30px !important; background: none !important; } .mp-page .analytics-page .miscellaneous > .wrap { max-width: none; padding: 0; } .mp-page .analytics-page .miscellaneous .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; } .mp-page .analytics-page .miscellaneous .row > div { max-width: none; width: auto; padding: 20px 22px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; text-align: left; } .mp-page .analytics-page .miscellaneous h4 { min-height: 0; margin: 0 0 6px !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 600; color: var(--hr-muted); text-transform: none; } .mp-page .analytics-page .miscellaneous .totals-digits { padding: 0; background: none; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--hr-text); } .mp-page .analytics-page .btn-wrapper-end { position: static !important; margin-top: 18px; } .mp-page .analytics-page .btn-wrapper-end .btn { padding: 11px 24px; border: 0; border-radius: 999px; background: var(--hr-accent); font-weight: 700; } @media (max-width: 991px) { .mp-page .analytics-page > .row.pt-5 > div:first-child { flex-basis: 100%; } .mp-page .analytics-page .miscellaneous .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Launching a competition (views/project/edit_new.php, upload_new.php, optionals_new.php, editPay_new.php, * payment/success_new.php, payment/failed_new.php, with _edit_header_new.php and _edit_header_menu_new.php) and the * second phase (secondPhase_new.php): CSS only, so the brief, uploads, invitations, invoice, Stripe and PayPal keep * their markup and scripts. The title on white, the free cancellation as a soft note, the three steps as numbered * cards, each form part as a card, the award choices as cards, the invoice as a card, buttons as pills ---- */ .site-redesign .bg-light-gray:has(.help-launch-competition) { background: #fff; } .site-redesign .bg-light-gray:has(.help-launch-competition) > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } .site-redesign .bg-light-gray:has(.help-launch-competition) h2 { padding: 4px 0 6px !important; font-size: 34px; font-weight: 800; letter-spacing: -.5px; } .site-redesign .help-launch-competition { position: static !important; width: auto !important; max-width: 1600px; margin: 0 auto 6px; padding: 0 var(--hr-gutter); background: none; } .site-redesign .help-launch-competition > div { width: auto !important; } .site-redesign .help-launch-competition .read-more { display: none !important; } .site-redesign .help-launch-competition p { display: block !important; max-height: none !important; } .site-redesign .help-launch-competition > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #e9f5ec; } .site-redesign .help-launch-competition > div > i { grid-row: span 2; font-size: 20px; color: #1e7b3a; } .site-redesign .help-launch-competition .title { font-size: 14px; font-weight: 800; color: #1e5c31; } .site-redesign .help-launch-competition p { margin: 0; font-size: 14px; color: #2e5a3a; } .site-redesign .launch-competition .wrap, .site-redesign .launch-competition > section > .wrap { max-width: 1600px; padding-left: var(--hr-gutter); padding-right: var(--hr-gutter); } .site-redesign .launch-competition h3 { font-size: 24px; font-weight: 800; } .site-redesign .launch-competition .steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1600px; margin: 0 auto 16px; padding: 0 var(--hr-gutter); background: none; border: 0; } .site-redesign .launch-competition .steps > div { padding: 14px 18px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; font-size: 15px; font-weight: 700; color: var(--hr-text); } .site-redesign .launch-competition .steps .num { margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hr-accent); } .site-redesign .launch-competition .help-section { max-width: 1600px; margin: 0 auto 18px; padding: 0 var(--hr-gutter); background: none !important; } .site-redesign .launch-competition .help-section > div { padding: 12px 16px; border-radius: 14px; background: var(--hr-soft); font-size: 14px; } .site-redesign .launch-competition .help-section p { margin: 0; font-size: 14px; color: #444; } .site-redesign .launch-competition .form.project-edit { max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); } .site-redesign .launch-competition .form.project-edit > .wrap, .site-redesign .launch-competition .form.project-edit .wrap { max-width: none; padding: 0; } .site-redesign .launch-competition .form.project-edit .hr { height: 1px; margin: 22px 0; background: var(--hr-line); } .site-redesign .launch-competition label.big, .site-redesign .launch-competition .big { font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--hr-text); } .site-redesign .launch-competition .form-control.bigger { height: 52px; font-size: 17px; } .site-redesign .launch-competition .award-price-radio { padding: 16px 18px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; cursor: pointer; } .site-redesign .launch-competition .award-price-radio.selected { border-color: var(--hr-text); box-shadow: inset 0 0 0 1px var(--hr-text); } .site-redesign .launch-competition .award-price-radio .title { font-size: 13px; font-weight: 700; color: var(--hr-muted); } .site-redesign .launch-competition .award-price-radio .price { font-size: 26px; font-weight: 800; color: var(--hr-text); } .site-redesign .launch-competition .actions, .site-redesign .launch-competition .actions + * { text-align: center; } .site-redesign .launch-competition .btn-lg, .site-redesign .payment-page .btn-lg { padding: 12px 26px; border-radius: 999px; font-size: 16px; font-weight: 700; } .site-redesign .launch-competition .btn-primary, .site-redesign .payment-page .btn-primary { border: 0; background: var(--hr-accent); } .site-redesign .launch-competition .btn-secondary { border: 1px solid #ddd; background: #fff; color: var(--hr-text); } /* uploads and the optional sub-tabs */ .site-redesign .launch-competition .upload-images #UploadSpace { max-width: 1600px; padding: 0 var(--hr-gutter); } .site-redesign .launch-competition .list-items-tabs.panel.pt-4.bg-light-red, .site-redesign .launch-competition .bg-light-red { background: none !important; } /* the optional parts (links, pictures, invitations): their two halves as cards in the page's gutter */ .site-redesign .launch-competition .form-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; max-width: 1600px; margin: 0 auto 14px; padding: 0 var(--hr-gutter); border: 0; } .site-redesign .launch-competition .form-box > div { padding: 20px 22px !important; border: 1px solid var(--hr-line) !important; border-radius: 16px; background: #fff; } .site-redesign .launch-competition .form-box .btn { border-radius: 999px; font-weight: 700; } /* payment: the invoice and terms as cards, the pay buttons as pills */ .site-redesign .payment-page { max-width: 900px !important; padding: 0 var(--hr-gutter) !important; } .site-redesign .payment-page > hr, .site-redesign .payment-page > .hr { display: none; } .site-redesign .payment-page #Invoice { margin: 0 0 18px; padding: 20px 22px; border: 1px solid var(--hr-line); border-radius: 18px; background: #fff; } .site-redesign .payment-page #Invoice > div { flex: 0 0 100%; max-width: 100%; } .site-redesign .payment-page #ConditionSection { padding: 14px 18px; border-radius: 14px; background: var(--hr-soft); } .site-redesign .payment-page .text-green { color: var(--hr-text) !important; } .site-redesign .payment-page :is(.pay-stripe-cc, .site-redesign .pay-link) { border-radius: 999px; font-weight: 700; } .site-redesign .ProjectEditStep .payment-header { font-size: 26px; font-weight: 800; } /* second phase: the finalists' table in a box */ .site-redesign #second-phase-page { max-width: 1600px; margin: 0 auto; padding: 0 var(--hr-gutter); } .site-redesign #second-phase-page .submissions-phase2 { border: 1px solid var(--hr-line); border-radius: 18px; overflow: hidden; } .site-redesign #second-phase-page .btn { border-radius: 999px; font-weight: 700; } @media (max-width: 767px) { .site-redesign .launch-competition .steps { grid-template-columns: minmax(0, 1fr); gap: 8px; } .site-redesign .bg-light-gray:has(.help-launch-competition) h2 { font-size: 26px; } } /* ---- Inviting donors on a running competition (views/donor/invite_new.php, _invite_new.php): the running * competition's top already; the invite form as a card in the page's gutter, the list and Send as the redesign's. * CSS only ---- */ .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) > .wrap { max-width: 1600px; padding: 0 var(--hr-gutter); } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) > .wrap h4 { margin: 0 0 6px; font-size: 24px; font-weight: 800; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) > .wrap [class*=divider-40] { height: 22px; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) .add-link-box { padding: 20px 22px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) .add-link-box .btn { border-radius: 999px; font-weight: 700; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) #invitedDonorsList .table { margin-top: 14px; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) #invitedDonorsList .text-green { color: var(--hr-text) !important; } .site-redesign .arcfolioland:has(#inviteDonorsByEmailBtn) .form-box-action #sendInvitation { padding: 11px 24px; border: 0; border-radius: 999px; background: var(--hr-accent); font-weight: 700; } /* ---- Prize labels: gold, silver and bronze with the Arcbazar flag (as in the logo), wherever a prize is shown: the * winning design on a finished competition and a design entry (.sc-place), the entry cards (.project-rank, worded * "2nd prize" by components/widgets/views/newProjectResultViewNew.php) and the client's ranking list (.award.prize) ---- */ :root { --prize-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14l-9-5.5L3 19z'/%3E%3C/svg%3E"); --gold-bg: #fcf1cc; --gold-line: #e2c25c; --gold-flag: #d4a52a; --silver-bg: #f0f0f2; --silver-line: #c6c6cc; --silver-flag: #9a9aa3; --bronze-bg: #fae3cd; --bronze-line: #e3a672; --bronze-flag: #c96b2a; } :is(.sc-place--first, .sc-place--second, .sc-place--third), :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions, .de-page) .list-items .item .project-rank:is(.first, .second, .third), .site-redesign .award.prize:is(.first, .second, .third) { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); box-shadow: 0 2px 8px #0000001a; font-size: 13px; font-weight: 800; line-height: 18px; color: #222; letter-spacing: 0; } :is(.sc-place--first, .sc-place--second, .sc-place--third)::before, :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions, .de-page) .list-items .item .project-rank:is(.first, .second, .third)::before, .site-redesign .award.prize:is(.first, .second, .third)::before { content: ""; flex: none; width: 18px; height: 16px; background: var(--flag); -webkit-mask: var(--prize-flag) center / contain no-repeat; mask: var(--prize-flag) center / contain no-repeat; } :is(.sc-place--first, .project-rank.first, .award.prize.first) { --bg: var(--gold-bg); --line: var(--gold-line); --flag: var(--gold-flag); } :is(.sc-place--second, .project-rank.second, .award.prize.second) { --bg: var(--silver-bg); --line: var(--silver-line); --flag: var(--silver-flag); } :is(.sc-place--third, .project-rank.third, .award.prize.third) { --bg: var(--bronze-bg); --line: var(--bronze-line); --flag: var(--bronze-flag); } .sc-place:is(.sc-place--first, .sc-place--second, .sc-place--third) { padding: 6px 14px 6px 10px; font-size: 14px; } :is(.sc-content, .sp-profile, .cm-home, .view-project-submissions, .de-page) .list-items .item .project-rank:is(.first, .second, .third) b { font-size: inherit; margin: 0; } .site-redesign .award.prize:is(.first, .second, .third) { box-shadow: none; } /* the designers' prize counts (Top 50, profiles) in the same three colours */ .sr-awards .is-first { background: var(--gold-bg); box-shadow: inset 0 0 0 1.5px var(--gold-line); } .sr-awards .is-first svg { fill: var(--gold-flag); } .sr-awards .is-second { background: var(--silver-bg); box-shadow: inset 0 0 0 1.5px var(--silver-line); } .sr-awards .is-second svg { fill: var(--silver-flag); } .sr-awards .is-third { background: var(--bronze-bg); box-shadow: inset 0 0 0 1.5px var(--bronze-line); } .sr-awards .is-third svg { fill: var(--bronze-flag); } /* the Top 50 card's numbers (6 Nov 2026): the projects larger; each prize count above its mark, the Arcbazar flag in * gold, silver or bronze with rounded corners, no pill */ .sr-card .sr-card__numbers { align-items: flex-end; } .sr-card .sr-card__projects dd { font-size: 34px; line-height: 1; letter-spacing: -.5px; } .sr-card .sr-card__awards { justify-items: center; } .sr-card .sr-awards--marks { gap: 22px; } html body .sr-card .sr-awards--marks span { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } .sr-card .sr-awards--marks b { margin-bottom: -2px; font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .sr-card .sr-awards--marks svg { width: 44px; height: 34px; overflow: visible; } .sr-card .sr-awards--marks svg path { stroke-width: 2.6; stroke-linejoin: round; } .sr-card .sr-awards--marks .is-first svg { fill: #c9a43f; stroke: #c9a43f; } .sr-card .sr-awards--marks .is-second svg { fill: #a8adb2; stroke: #a8adb2; } .sr-card .sr-awards--marks .is-third svg { fill: #c17b4c; stroke: #c17b4c; } @media (max-width: 1199px) { .sr-card .sr-card__projects dd { font-size: 28px; } .sr-card .sr-awards--marks { gap: 14px; } .sr-card .sr-awards--marks svg { width: 36px; height: 28px; } } /* online now (User::isOnline; Top 50 card and its "Online now" chip, 6 Nov 2026): a green line a few pixels outside the * photo, in the photos' squircle (--hr-squircle, home-redesign.css), glowing softly */ .sr-card__face { position: relative; display: block; width: fit-content; line-height: 0; } .sr-card__face .sr-card__photo { position: relative; z-index: 1; } .sr-card__face.is-online::before, .sr-card__face.is-online::after { content: ""; position: absolute; -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat; } .sr-card__face.is-online::before { inset: -6px; background: #22c55e; } .sr-card__face.is-online::after { inset: -3px; background: #fcfbfa; } .sr-card__face.is-online { filter: drop-shadow(0 0 5px rgba(34, 197, 94, .55)); animation: sr-online-glow 2.4s ease-in-out infinite; } @keyframes sr-online-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(34, 197, 94, .35)); } 50% { filter: drop-shadow(0 0 9px rgba(34, 197, 94, .75)); } } @media (prefers-reduced-motion: reduce) { .sr-card__face.is-online { animation: none; } } .sr-card__online { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: #15803d; } .sr-card__online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } /* not active for over a year (ratingInfo_redesign.php): a message may wait a while */ .sr-card__quiet { margin: 0; font-size: 12.5px; color: var(--hr-muted); } .sr-chip--online { display: inline-flex; align-items: center; gap: 7px; } .sr-chip--online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .7); } /* ---- SpaceApp's AI review of a built project (ProjectBuiltReview; views/project/implemented_view_redesign.php and * the Projects built cards): the likeness score, what was kept and what changed ---- */ .pb-card__score { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 800; color: #1e7b3a; } .pb-review { max-width: 1100px; } .pb-review .hr-eyebrow { margin-bottom: 8px; } .pb-review__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px 32px; } .pb-review__head h2 { margin: 0; font-size: 28px; line-height: 1.25; } .pb-review__score { display: grid; justify-items: start; gap: 2px; min-width: 190px; padding: 14px 18px; border-radius: 16px; background: #eef6f0; color: #1e5a33; } .pb-review__score strong { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -1px; } .pb-review__score small { font-size: 16px; font-weight: 700; letter-spacing: 0; color: #4c7a5b; } .pb-review__score span { font-size: 13px; font-weight: 600; } .pb-review__score i { display: block; width: 100%; height: 6px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, #1e7b3a var(--score), #cfe5d6 var(--score)); } .pb-review__summary { max-width: 72ch; margin: 16px 0 22px; font-size: 16px; line-height: 1.65; color: #333; } .pb-review__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pb-review__list { padding: 18px 20px; border: 1px solid var(--hr-line); border-radius: 16px; background: #fff; } .pb-review__list h3, .pb-review__subtitle { margin: 0 0 10px; font-size: 16px; font-weight: 700; } .pb-review__list ul, .pb-review__highlights { margin: 0; padding: 0; list-style: none; } .pb-review__list li { position: relative; padding: 0 0 8px 24px; font-size: 14px; line-height: 1.5; } .pb-review__list li::before { position: absolute; left: 0; top: 0; font-weight: 800; } .pb-review__list--kept li::before { content: "\2713"; color: #1e7b3a; } .pb-review__list--changed li::before { content: "\21C4"; color: #a8632a; } .pb-review__subtitle { margin-top: 24px; } .pb-review__highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .pb-review__highlights li { padding: 12px 14px; border-radius: 14px; background: var(--hr-soft); font-size: 14px; line-height: 1.5; } .pb-review__note { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--hr-muted); } @media (max-width: 767px) { .pb-review__head { grid-template-columns: minmax(0, 1fr); } .pb-review__head h2 { font-size: 22px; } .pb-review__lists { grid-template-columns: minmax(0, 1fr); } } /* SpaceApp beside its AI review (only with params['spaceApp'] on): its icon and name in the note, its box below */ .pb-review__app { display: inline-flex; align-items: center; gap: 5px; margin-right: 3px; font-weight: 700; color: var(--hr-text); text-decoration: none; vertical-align: -4px; } .pb-review__app img { width: 18px; height: 18px; border-radius: 5px; } .pb-review__app:hover { text-decoration: underline; } .pb-review .sa-app--card { margin: 18px 0 0; } /* the countdown boxes (home-redesign.css) on a running competition's top: white in the grey box, larger */ .rc-award__time--clock strong.is-boxes { display: flex; gap: 5px; margin-top: 4px; font-size: inherit; letter-spacing: 0; } .rc-award__time--clock strong.is-boxes .cd-box { min-width: 50px; padding: 6px 5px 5px; background: #fff; } .rc-award__time--clock strong.is-boxes .cd-box b { font-size: 20px; } .rc-award__time--clock strong.is-boxes.is-soon .cd-box { background: var(--hr-accent); } /* on a client's My Home card: a little smaller */ .cm-card__clock.is-boxes .cd-box { min-width: 34px; padding: 4px 3px 3px; } .cm-card__clock.is-boxes .cd-box b { font-size: 13px; } /* the designer's My Home (user/_my_competitions_new.php) keeps its jQuery countdown: its four sections as the boxes */ .dm-home .deadline-timer.is-countdown { border: 0; background: none; } .dm-home .deadline-timer .countdown-row { display: flex; gap: 4px; padding: 0; text-align: left; } .dm-home .deadline-timer .countdown-section { display: grid; justify-items: center; float: none; width: auto !important; min-width: 38px; padding: 5px 4px 4px; border-radius: 9px; background: #f0f0f0; color: var(--hr-text); } .dm-home .deadline-timer .countdown-amount { font-size: 15px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; } .dm-home .deadline-timer .countdown-period { font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; } .dm-home .timer:has(.deadline-timer.is-countdown) { padding: 0; border: 0; border-radius: 0; background: none; } .dm-home .deadline-timer .countdown-section::before, .dm-home .deadline-timer .countdown-section::after { content: none !important; display: none !important; } /* ---- Real clients, real projects (views/user/clients_redesign.php) and a public client on their competition ---- */ .cl-grid .cl-card > a { display: grid; gap: 8px; color: var(--hr-text); text-decoration: none; } .cl-card__image { position: relative; display: block; } .cl-card__image img { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 14px; background: var(--hr-soft); } .cl-card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; background: #1e7b3a; font-size: 12px; font-weight: 800; color: #fff; } .cl-card__who { display: flex; align-items: center; gap: 12px; margin-top: -34px; padding-left: 12px; position: relative; } html body .cl-card__who img.cl-card__photo { width: 56px; height: 56px; object-fit: cover; background: #fff; border-radius: 0; -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat; box-shadow: 0 0 0 3px #fff; } .cl-card__who > span { display: grid; padding-top: 30px; line-height: 1.25; } .cl-card__who strong { font-size: 15px; } .cl-card__who small { font-size: 12px; color: var(--hr-muted); } .cl-card h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; } .cl-card__facts { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 13px; color: var(--hr-muted); } .cl-card__facts strong { color: var(--hr-text); } .cl-card__quote { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: #444; } .cl-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 10px var(--hr-gutter) 40px; padding: 24px 28px !important; border-radius: 20px; background: var(--hr-soft); } .cl-join h2 { margin: 0 0 4px; font-size: 22px; } .cl-join p { max-width: 640px; margin: 0; color: #444; } .sc-client { margin: 4px 0 14px; font-size: 14px; } .sc-client .cl-by a { font-weight: 700; } .cm-public { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 24px; padding: 18px 22px; border: 1px solid #cfe5d6; border-radius: 18px; background: #f3f9f5; } .cm-public > div { flex: 1 1 320px; } .cm-public strong { display: block; margin-bottom: 2px; font-size: 16px; } .cm-public p { margin: 0; font-size: 14px; color: #444; } .cm-public .hr-primary { padding: 11px 18px; font-size: 14px; } /* the first prize's designer with their photo, as large as the client's above (6 Nov 2026) */ .sc-winner { display: flex; align-items: center; gap: 12px; } html body .sc-winner img.sc-winner__photo { flex: none; width: 56px; height: 56px; object-fit: cover; background: var(--hr-soft); border-radius: 0; -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat; } .sc-client .cl-by { gap: 12px; font-size: 14px; } /* the client on their competition's page: a larger photo, the name beside it (6 Nov 2026) */ html body .sc-client .cl-by img.cl-by__photo { width: 84px; height: 84px; } .sc-client .cl-by { gap: 14px; font-size: 15px; } /* ---- "Check your inbox" (views/site/verifyEmail_redesign.php): the 6-digit code, a new code, another address ---- */ .ve-msg { max-width: 560px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; } .ve-msg--error { background: #fbe9ec; color: #8a1f33; } .ve-msg--ok { background: #eef6f0; color: #1e5a33; } .ve-code { max-width: 420px; margin: 6px 0 18px; } .ve-code label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--hr-muted); } .ve-code__row { display: flex; flex-wrap: wrap; gap: 10px; } .ve-code__row input { flex: 1 1 180px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid #cfcfcf; border-radius: 14px; font-size: 24px; font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; } .ve-code__row input[type=email] { font-size: 15px; font-weight: 400; letter-spacing: 0; height: 46px; } .ve-code__row input:focus { outline: none; border-color: var(--hr-text); } .ve-again { display: grid; gap: 8px; margin: 0 0 22px; font-size: 14px; } .ve-again form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .ve-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--hr-text); text-decoration: underline; cursor: pointer; } .ve-change summary { list-style: none; display: inline; } .ve-change summary::-webkit-details-marker { display: none; } .ve-change[open] form { margin-top: 10px; max-width: 460px; }